我不是 Vue.js 专家，但以下内容适用于一般的 JS。

如果 socialiteLogins 为 null 或 undefined ，则无法读取其 length 属性。只有当 socialiteLogins 是数组、对象或函数时，才可以读取该属性。这就是您收到消息的原因：

Cannot read property 'length' of null

如果 socialiteLogins 为 undefined 或空数组，则 socialiteLogins !== null 。但是， socialiteLogins == null （请注意，这是使用松散比较）。

如果 socialiteLogins 是空数组，则它仍然是真值。 v-show 会将其视为 true 。

这些事实的结合使得您的代码无法工作。

就您而言，我认为这会起作用：

 <div class="panel panel-default" v-show="socialiteLogins && socialiteLogins.length">

工作原理：

JS && 运算符评估第一个语句；如果它为真，则返回第二个语句的值。如果第一个语句为假，则返回其值。

v-show 将表达式的结果强制转换为布尔值。

如果 socialiteLogins 为 undefined 或 null ，则返回该值，该值被强制转换为 false 。

如果 socialiteLogins 为空数组，则 socialiteLogins 为真，因此 && 返回第二个语句； socialiteLogins.length 将为 0 。这也将被强制为 false 。

如果 socialiteLogins 是一个包含内容的数组，则 socialiteLogins 将为真，并且 socialiteLogins.length 将是一个非零数字，它将被强制为 true 。

@RyanZim 的回答很有帮助。如果以后有人通过搜索来到这里，这里是解决方案。

问题源于数据的初始状态。例如，我有这个：

data: function() {
    return {
        socialiteLogins: null
    }
},

它适用于 !== null，但不适用于检查 .length。稍后当它返回一个空对象时，.legnth 将起作用但不会为 null。

因此，解决方案是始终保持其正确的类型，以便我可以运行一致的检查：

data: function() {
    return {
        socialiteLogins: []
    }
},

这是给您的提示。

<div class="panel panel-default" v-if="Object.keys(socialiteLogins).length > 0">

就这样吧。

标记为已回答。