检查对象是否未定义

Question

我的Vue组件中有以下数据对象：

 data() {
        return {
           items: {}
        }
     },

我检查一下是否为空，并显示一条消息：

 <tr v-if="items.data.length === 0"><p>There are currently no items.</p></tr>

此代码有效，但是我在控制台中收到以下错误消息：

  

渲染错误：“ TypeError：无法读取以下属性的'length'   未定义”

     

TypeError：无法读取未定义的属性“ length”

如何检查对象是否未定义？有时候 items 对象充满数据，有时却没有。

Answer 1

您需要首先确保data属性存在，然后检查其长度。

您可以使用逻辑AND运算符，如果“ items.data”可强制转换为false，则该运算符将返回false，因此第二部分“长度”检查将根本不会执行。

<tr v-if="items.data && items.data.length === 0"><p>There are currently no items.</p></tr>