无涯教程网

Vue.js 无法读取 null 的属性 length长度

发布于11月23日

如果我这样做:

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

面板没有隐藏.如果我单独判断socialiteLogins === null，或者使用==，它们都返回对象不是空的.但它绝对是空的.如果我把它倒在页面上，结果是[].它是一个空的json对象.所以如果我try 一下:

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

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

无法读取null的属性"length"

But 如果我这样做:

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

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

编辑:

除此之外...如果我这样做:

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

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

推荐答案

@RyanZim的回答起了作用.这是一个解决方案，以防将来有人通过搜索来到这里.

问题源于数据的初始状态.例如，我有一个:

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

哪个对你有用！==空，但不用于判断.长稍后当它返回一个空对象时.legnth可以工作，但不能为null.

因此，解决方案是始终保持正确的类型，以便我可以运行一致性判断:

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

Vue.js相关问答推荐

将 html 文件移出 dist vite 中的 src 文件夹

在 VueJS 中，将变量而不是组件的字符串名称传递给动态组件的：is 属性不起作用

我在表格中创建了一个包含信息的新行，但在 Cypress e2e 测试中我无法获得最后一行(新行)

：deep() 带有嵌套 scss 规则的语法

VeeValidate 4 字段验证状态

props至少应该定义它们的类型

如何在 vue.js 2 的其他组件中调用方法？

使用 vue-property-decorator 时注册本地组件

加载和渲染时对象值上的 Vue.js 未定义错误

单击复选框后，V-model 未更新

Vue：从 Vue 实例更新组件数据

VueRouter 未定义

如何从 vue.js 中的自定义组件中冒泡点击事件？

v-for 如何在继续之前判断未定义的列表

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue？

安装后运行computed计算函数

Vue.js 单向绑定表单

Vue.js react性如何在幕后工作？

Vue Router beforeRouteLeave 不会停止子组件

用于身份验证标头的 vue-resource 拦截器

实用课程推荐

相关教程推荐