Vue.js - 組件數據不會更新

我有一個基於數組的Vue列表，並且每個數組項都呈現一個組件，其中我綁定了數組項目屬性。Vue.js - 組件數據不會更新

<div v-for="item in items"> 
     <item v-bind:item="item"></item> 
    </div>

該組件具有混合數據的基礎上，綁定屬性

Vue.component('item', { 
    template: '<p>ID: {{item.id}}, {{component_id}}</p>', 
    props: ['item'], 
    data: function() { 
    return { 
     component_id: this.item.id 
    } 
    } 
});

的問題是，當我改變初始列表陣列中的任意方式中，組件的混合丙保持它的原始更新並且不會更改，即使原始綁定數據發生更改。

http://codepen.io/anything/pen/bgQBwQ

我怎樣才能讓組件來更新它的流數據的財產？

來源

2017-02-10 Adrian Florescu

在這種情況下你不應該使用[計算屬性]（https://vuejs.org/v2/guide/computed.html）嗎？ – UnholySheep

@UnholySheep是的！謝謝。我對vuejs非常陌生，而且我不知道計算出來的屬性，它現在可以工作。萬分感謝！ http://codepen.io/anything/pen/GrwNew –

@UnholySheep，你可以添加你的答案，以投票和幫助其他人嗎？ –

的要求，在回答的形式：

在這種情況下computed property是正確的做法，導致了下面的代碼：

Vue.component('item', { 
    template: '<p>Original: {{item.id}}, Mixed: {{component_id}}, Computed: {{computed_id}}</p>', 
    props: ['item'], 
    computed: { 
    computed_id: function() { 
     return this.item.id; 
    } 
    } 
});

這樣的computed_id會（正確地）重新計算每當item支柱發生變化時。

來源

2017-02-10 13:25:36 UnholySheep

這是正確的，但現在我有另一個問題：如果某個屬性不是來自父母的數據，我如何更新一個特定的值並保持：http://codepen.io/anything/pen/vgQgeM這有一個點擊事件，它會更新一個值。這是針對特定項目進行更新的，但是當我擁有該陣列時仍然存在。有什麼想法嗎？ –

@AdrianFlorescu我不是100％確定我明白你想達到的目標（你應該爲它創建一個新的問題）。如果你想把一個「組件局部」變量（通過'data'定義）與一個來自prop的變量結合起來，你可以在計算的變量內部完成這個變量（而不是直接修改計算值） - 例如：'computed_id：function（）{return this.item.id + this.id; }（其中'this.id'是組件'data'部分定義的變量）。如果這不是你正在瞄準的目標應該可能會產生一個新的問題。 – UnholySheep

我應該創建一個新問題，但要回答您的問題，請查看上面的筆並單擊任意行。值更新，但當我更改數組時，我希望該值消失。不知道爲什麼即使您更改數組，也會出現在同一行上。 –

Vue.js - 組件數據不會更新

回答

相關問題