Javascript Vue.js无法读取属性'；长度'；空的

如果我这样做：

<div class="panel panel-default" v-if="socialiteLogins !== null">

<div class="panel panel-default" v-if="socialiteLogins !== null && socialiteLogins.length !== 0">

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

面板仍然没有隐藏，我得到以下错误：

无法读取null的属性“length”

但如果我这样做：

<div class="panel panel-default" v-if="socialiteLogins !== null">

<div class="panel panel-default" v-if="socialiteLogins !== null && socialiteLogins.length !== 0">

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

它完美地隐藏了面板，在初始加载时没有任何警告，但是当我稍后更新socialiteLogins变量时，如果它再次返回空json对象，则会收到长度警告。知道为什么吗

编辑：

再加上。。。如果我这样做：

<div class="panel panel-default" v-if="socialiteLogins !== null">

<div class="panel panel-default" v-if="socialiteLogins !== null && socialiteLogins.length !== 0">

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

---

它在初始加载时显示，即使没有，但如果在页面加载后删除它们，它会正确隐藏面板。因此，唯一的问题似乎是初始加载时没有正确检测到没有记录。

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

---

如果

socialiteLogins

为

null

或

undefined

，则无法读取它的

length

属性。只有当

socialiteLogins

是一个数组、对象或函数时，才能读取。这就是你得到信息的原因：

无法读取null的属性“length”

如果

socialiteLogins

是

undefined

或空数组，

socialiteLogins！==空

。但是，

socialiteLogins==null

（注意，这是使用松散比较）

如果

socialiteLogins

是一个空数组，那么它仍然是真实的

v-show

将其视为

true

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

---

在你的情况下，我认为这会起作用：

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

工作原理：

JS

&&

操作符计算第一条语句；如果它是truthy，则返回第二条语句的值。如果第一条语句是falsy，则返回其值

v-show

将表达式的结果强制为布尔值

如果

socialiteLogins

为

undefined

或

null

，则返回该值，该值被强制为

false

如果

socialiteLogins

是一个空数组，

socialiteLogins

是truthy，那么

&&

返回第二条语句<代码>社交登录。长度将为

0

。这也将被强制为

false

---

如果

socialiteLogins

是一个包含内容的数组，

socialiteLogins

将是truthy，

socialiteLogins.length

将是一个非零数字，它将被强制为

true

@RyanZim的答案有帮助。这是一个解决方案，以防将来有人通过搜索来到这里

问题来自数据的初始状态。例如，我有一个：

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

哪个适用于！==null，但不用于检查。长度。稍后，当它返回空对象时，.legnth将起作用，但不为null

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

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

---

编辑：对于将来找到这个答案的人来说，这里的主要问题是没有使用正确的类型。如果要检查长度，必须使用数组。对于对象，您要计算关键点，而不是长度，长度不是对象的属性。

这里是给您的提示

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

我们走了，就这些

---

标记为已回答

也许你的问题有错；你说的第一个例子不起作用，但最后一个例子完全一样，你说它起作用。@RyanZim有，谢谢，加上我做了更多的测试，它仍然不起作用，所以我更新了问题。不确定它是否是打字错误；如果将初始值设置为空数组（

[]

），而不是空对象，则代码的意图会更清楚。下面的IMO更好。对我来说，最好定义一个初始状态，而不是到处添加检查。如果您必须在模板中检查此条件10次，该怎么办？在视图组件的

data

中定义类似于

socialiteLogins:[]

的状态对我来说是一个更好的解决方案。