如何在VueJS插值中使用未定義對象屬性的默認值？

如何在VueJS插值中使用未定義對象屬性的默認值？我的data是一個計算變量，並且在選擇框中選擇selectedDataId之前未定義，所以vue發送「無法讀取未定義的」錯誤「屬性'grandChild'。如何在VueJS插值中使用未定義對象屬性的默認值？

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; 
      }); 
     } 
    } 
});

來源

2016-11-19 jonan.pineda

我不熟悉Vue.js，但在普通的JS，你可以檢查的屬性與定義：'{{selectedData.child && selectedData.child.grandChild}}' – Nico

您可以使用以下模式：

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

它將安全檢查grandChild和打印「默認值」，如果它是falsy。

來源

2016-11-19 21:55:57 str

謝謝！這是最有用的答案。由於我的聲明中有重複，'selectedData'不應位於@GuyC指出的'data'中。所以我結束了使用'{{selectedData && selectedData.child && selectedData.child.grandChild || '默認值'}}' –

試試這個

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

來源

2016-11-19 05:24:49 stasovlas

您聲明selectedData兩次，你應該從數據對象中刪除。

爲它被未定義你可能只是你的模板中測試這個問題：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，然後上面的測試將工作，傳遞一個空的對象會讓他們truthy。

來源

2016-11-19 08:00:30 GuyC

如何在VueJS插值中使用未定義對象屬性的默認值？

回答

相關問題