Question

如果我这样做：

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

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

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

小组仍然无法隐藏，我收到此错误：

无法读取属性＆＃39;长度＆＃39;为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的{{1}}属性。只有在socialiteLogins是数组，对象或函数时才能读取。这就是你收到消息的原因：

无法读取属性＆＃39;长度＆＃39;为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。< / p>

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

这就是我们的全部。

标记为已回答。