Vue.js 无法读取 null 的属性“长度”

Question

如果我这样做：

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

面板不会隐藏。如果我单独或使用 == 检查 socialiteLogins === null ，它们都返回该对象不为空。它绝对是空的。如果我将它转储到页面上，我会得到 [] 作为结果。它是一个空的 json 对象。所以如果我试试这个：

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

该面板仍然没有隐藏，我收到此错误：

无法读取 null 的属性“长度”

但如果我这样做：

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

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

编辑：

添加到它……如果我这样做：

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

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

原文由 Citizen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

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

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

原文由 Citizen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我不是 Vue.js 专家，但以下内容通常适用于 JS。

---

If socialiteLogins is null or undefined , you can’t read the length property of it.仅当 socialiteLogins 是数组、对象或函数时才可读取。这就是您收到消息的原因：

无法读取 null 的属性“长度”

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

如果 socialiteLogins 是一个空数组，它仍然是真实的。 v-show 将其视为 true 。

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

---

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

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

这个怎么运作：

JS && 运算符对第一条语句求值；如果为真，则返回第二条语句的值。如果第一个语句是假的，它返回它的值。

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

If socialiteLogins is undefined or null , it returns that value, which is coerced to false .

如果 socialiteLogins 是一个空数组， socialiteLogins 为真，那么 && 返回第二条语句； socialiteLogins.length 将是 0 。这也将被强制为 false 。

If socialiteLogins is an array with contents, socialiteLogins will be truthy, and socialiteLogins.length will be a non-zero number, which will be coerced to true 。

原文由 RyanZim 发布，翻译遵循 CC BY-SA 3.0 许可协议