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">

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

Answer 1

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

---

如果socialiteLogins 是null 或undefined，则无法读取它的length 属性。仅当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 将表达式的结果强制转换为布尔值。

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

如果socialiteLogins为空数组，socialiteLogins为真，所以&&返回第二条语句； socialiteLogins.length 将是 0。这也将被强制转换为 false。

如果socialiteLogins 是一个有内容的数组，socialiteLogins 将是真实的，socialiteLogins.length 将是一个非零数字，它将被强制转换为true。

Answer 2

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

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

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

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

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

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

Answer 3

这是给你的提示。

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

到此为止。

标记为已回答。