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

如何在VueJS插值中使用未定义对象属性的默认值?我的数据是一个计算变量,并且在selectbox中选择selectedDataId之前首先未定义,因此vue发送“无法读取属性’grandChild’的未定义”错误.

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;
           });
       }
   }
});
最佳答案
您可以使用以下模式:

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

如果它是假的,它将安全地检查grandChild并打印“默认值”.

转载注明原文:javascript – 如何在VueJS插值中使用未定义对象属性的默认值? - 代码日志