Wie verwende ich einen Standardwert für undefinierte Objekteigenschaften in der VueJS-Interpolation?

Question

Wie verwende ich einen Standardwert für undefinierte Objekteigenschaften in der VueJS-Interpolation? Meine data ist eine berechnete Variable und ist zuerst undefiniert, bevor eine selectedDataId in einer Selectbox ausgewählt wird, so dass vue eine sendet "Eigenschaft 'GrandChild' von undefined" Fehler kann nicht gelesen werden.

P. S .: Ich verwende 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

Sie könnten das folgende Muster verwenden:

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

Es wird für grandChild und print „Standardwert“ sicher prüfen, ob es falsy ist.

Answer 2

dieses versuchen

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

Answer 3

Sie selectedData zweimal deklarieren, sollten Sie es aus dem Datenobjekt entfernen.

wie für ein Problem damit nicht definiert ist, die Sie gerade für diesen in Ihrer Vorlage testen konnten: v-if="selectedItem" oder Methoden: if (selectedItem)

Sie brauchen hier nicht wirklich lodash als Vue ein in-Filter-Methode aufgebaut hat:

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

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

eher als ein Standard-Objekt würde ich wahrscheinlich setzen sie einfach die oben null wenn die selectedItem.length ist 0. Dann werden die oben genannten Tests funktionieren wird, ein leeres Objekt übergeben wird sie truthy machen.