How to use the default value for an undefined object property in VueJS interpolation?

Question

How to use the default value for an undefined object property in VueJS interpolation? My datais a computed variable and undefined first before being selected selectedDataIdin selectbox, so vue sends "cannot read the property" grandChild "from undefined" .

PS: I use 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

You can use the following template:

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

It will safely check grandChildand print the "default" if it is false.

Answer 2

selectedData, .

, undefined, : 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, selectedItem.length 0. , .

Answer 3

try it

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