如何在 VueJS 插值中使用未定义对象属性的默认值？答案

【问题标题】：How to use a default value for undefined object property in VueJS interpolation?如何在 VueJS 插值中使用未定义对象属性的默认值？
【发布时间】：2017-04-02 23:47:50
【问题描述】：

如何在 VueJS 插值中为未定义的对象属性使用默认值？我的data 是一个计算变量，在选择框中选择selectedDataId 之前首先是未定义的，因此 vue 发送 "cannot read property 'grandChild' of undefined" 错误。

P.S.：我正在使用 lodash

<div>
    {{ selectedData.child.grandChild }}
</div>

new Vue({
   data: {
       selectedDataId: null,
       selectedData: {},
       data: [ //array of objects here ]
   },
   computed: {
       selectedData() {
           return _.find(this.data, (d) => {
               return d.id == this.selectedDataId;
           });
       }
   }
});

【问题讨论】：

我不熟悉 Vue.js，但在普通 JS 中，您可以检查属性是否定义为：{{ selectedData.child && selectedData.child.grandChild }}

标签： javascript vue.js lodash

【解决方案1】：

您可以使用以下模式：

{{ selectedData.child && selectedData.child.grandChild || 'default value' }}

它将安全地检查grandChild，如果它是假的，则打印“默认值”。

【讨论】：

谢谢！这是最有帮助的答案。由于我的声明中有重复，@GuyC 指出，selectedData 不应该在data 中。所以我最终使用了{{ selectedData && selectedData.child && selectedData.child.grandChild || 'default value' }}

【解决方案2】：

你声明了 selectedData 两次，你应该从数据对象中删除它。

至于未定义的问题，您可以在模板中对此进行测试：v-if="selectedItem" 或方法：if (selectedItem)

你在这里并不需要 lodash，因为 Vue 有一个内置的过滤器方法：

selectedData() {
    const selectedItem = this.data.filter((item) => {
        return item.id == this.selectedDataId
    })

    return selectedItem.length ? selectedItem[0] : {} // i'd set null here on fail
}

如果selectedItem.length 为0，我可能只是将上面设置为null 而不是默认对象。然后上面的测试将起作用，传递一个空对象将使它们成为真实的。

【讨论】：

【解决方案3】：

试试这个

selectedData() {
    return _.chain(this.data)
        .find({id: this.selectedDataId})
        .defaults(...default object...)
        .value()
}

【讨论】：