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

Question

如何在VueJS插值中使用未定义对象属性的默认值？我data是一个计算变量,并且在选择一个selectedDataIdselectbox 之前首先是未定义的,因此vue发送一个"无法读取属性'grandChild'的未定义"错误.

PS:我正在使用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如果它是假的,它将安全地检查并打印"默认值".