Vue js計算屬性評估順序

我有一個使用'data1'道具的組件。Vue js計算屬性評估順序

<template> 
    <div> 
     <component1 :data='data1'><component1> 
    </div> 
<template>

這DATA1是需要另一個運算數據爲計算其值中的一個所計算的屬性：

computed: { 

    componentInfo: function() { 
     return this.$store.state.componentData; 
    } 

    data1: function() { 
     return {value1: this.componentInfo.value1, ... other values} 
    } 
}

我的問題是，組件試圖從商店得到componentInfo之前評估DATA1值（由於this.componentInfo仍未定義，導致錯誤）

應如何處理這種情況？

來源

2017-09-04 Reg

也許設立支柱的默認值：'道具：{數據：{默認：null/*或默認值* /}}' –

計算性能應僅在需要時才進行評估。您可以在另一個內部使用計算屬性，它應該可以正常工作。是'$ store'中的數據嗎？一種雙重檢查的方法是直接在'data1'方法中使用'this。$ store.state.componentData.value1'。 –

你正在得到什麼確切的錯誤？在計算屬性之前，商店未被初始化似乎不太可能。 –

這很容易處理。只需添加一個額外的if來計算性能：

data1() { 
    if (this.componentInfo) { // check if it exists 
    return { value1: this.componentInfo.value1, ... other values } 
    } else { 
    return {} // some default value 
    } 
}

來源

2017-09-04 11:02:49

Vue js計算屬性評估順序

回答

相關問題