Vue.js - 組件數據不更新

Question

我有一個基於數組的 Vue 列表，每個數組項呈現一個組件，我在其中綁定數組項屬性。

  <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

如何使組件更新它的 ow 數據屬性？

Answer 1

按照答案的形式要求：

在這種情況下，計算屬性是正確的方法，導致以下代碼：

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

這樣，每次item屬性更改時，都會（正確地）重新computed_id 。