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

问题在于，当我以任何方式更改初始列表数组时，即使原始绑定数据发生更改，组件的混合prop也会保持其原始更新并且不会更改。

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

如何让组件更新它的数据属性？

Answer 1

按照答案的形式提出要求：

在这种情况下，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都会（正确）重新计算。

Vue.js - 组件数据不会更新

1 个答案: