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

面板仍然无法隐藏,我收到此错误:

无法读取null的属性"length"

但如果我这样做:

<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的属性"length"

如果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: {}
    }
},

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