Question

如何在VueJS插值中使用未定义对象属性的默认值？我的data是一个计算变量，在选择框中选择selectedDataId之前首先未定义，因此vue会发送＆＃34;无法读取属性＆＃39; grandChild＆＃39;未定义＆＃34; 错误。

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;
           });
       }
   }
});

Answer 1

您可以使用以下模式：

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

它将安全地检查grandChild并打印＆＃34;默认值＆＃34;如果它是假的。

Answer 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
}

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

Answer 3

试试这个

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

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

3 个答案: