javascript - Vue.js 无法读取 null 的属性 'length'

Question

如果我这样做:

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

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

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

面板仍然没有隐藏，我得到这个错误:

Cannot read property 'length' of 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 是数组、对象或函数时才可读取。这就是您收到消息的原因:

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 将表达式的结果强制转换为 bool 值。

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

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

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