VueJS補間で未定義オブジェクトプロパティのデフォルト値を使用する方法は？

Question

VueJS補間で未定義オブジェクトプロパティのデフォルト値を使用する方法は？私のdataは計算された変数であり、最初に選択ボックスでselectedDataIdを選択する前に定義されていないので、vueはを送信します。 "未定義のgrandChild 'プロパティを読み取ることができません"エラー。

P.S：私はあなたが二回selectedDataを宣言している

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

Answer 1

は、次のパターンを使用することができます。

Answer 2

を使用しています。 v-if="selectedItem"または方法：Vueのは、フィルタ方式で建てられているようにあなたが本当にここにlod​​ash必要はありませんif (selectedItem)

：それはあなたがちょうどあなたのテンプレートの中にこれをテストすることができ未定義されているとの問題のよう

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

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

よりもむしろselectedItem.lengthは0そして、上記のテストは、空のオブジェクトがそれらをtruthyようになります渡し、動作する場合、私はおそらくちょうどnullに上記を設定しますデフォルトのオブジェクト。それはfalsyある場合

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

それが安全grandChildと印刷「のデフォルト値」をチェックします：

Answer 3

、あなたはデータオブジェクトからそれを削除する必要があり、これを試してください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; 
      }); 
     } 
    } 
});