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

如果我这样做:

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

面板不会隐藏。如果我单独检查socialiteLogins === null或使用==，它们都返回该对象不为null。不过绝对是空的。如果将其转储到页面上，则结果为[]。这是一个空的json对象。因此，如果我尝试这样做:

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

面板仍然没有隐藏，并且出现此错误:



但是，如果我这样做:

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

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

编辑:

添加到它...如果我这样做:

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

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

最佳答案

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

如果socialiteLogins是null或undefined，则无法读取它的length属性。仅当socialiteLogins是数组，对象或函数时，才能读取该内容。这就是为什么您收到此消息的原因:



如果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将为true，而socialiteLogins.length将为非零数字，该数字将被强制为true。

关于javascript - Vue.js无法读取null的 'length'属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40753964/