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

我有一个基于数组的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
    }
  }
});

Vue.component（'item'{
模板：“ID:{{item.ID}，{{component_ID}}
”，
道具：['item']，
数据：函数（）{
返回{
组件标识：this.item.id
}
}
});

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

---

如何使组件更新其ow数据属性？

以回答形式请求：

在这种情况下，a是正确的方法，导致以下代码：

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

Vue.component（'item'{
模板：“原始：{{item.id}}，混合：{{component_id}}，Computed:{{Computed_id}}
”，
道具：['item']，
计算：{
计算的\u id:function（）{
返回此.item.id；
}
}
});

---

这样，每次

项目

道具更改时，都会（正确地）重新计算

计算的\u id。
在这种情况下，您不应该使用吗？@UnholySheep YES！谢谢我是vuejs的新手，我不知道computed属性，它现在可以工作了。非常感谢@UnholySheep，你能添加你的答案来投票并帮助其他人吗？这是正确的，但现在我有另一个问题：如果某个属性不是来自父数据，我如何更新特定的值以及要维护的值：这有一个单击事件，它更新一个值。它会针对特定项目进行更新，但在我拥有阵列时仍会保留。有什么想法吗？@AdrianFlorescu我不能100%肯定我理解你想要实现的目标（你可能应该为它提出一个新问题）。如果您想将“组件局部”变量（通过
数据定义）与道具中的变量组合在一起，您可以在计算的变量内部进行组合（而不是直接修改计算值），例如：
computed\u id:function（）{return this.item.id+this.id；}
（其中，
this.id
将是组件
data
部分中定义的变量）。如果这不是您的目标，您可能应该创建一个新问题。我应该创建一个新问题，但要回答您的问题，请查看上面的笔并单击任意一行。值会更新，但当我更改数组时，我希望该值消失。不确定为什么即使您更改数组，该值也会出现在同一行上。@AdrianFlorescu在您的笔中，计算属性不再以任何方式连接到道具（您正在访问
this.id
，而不是道具
this.item.id
），因此不会修改属性的值。由于Vue如何处理渲染列表的更新（在后台），它会粘在完全相同的行上-它不会从头开始重新创建它们，而是重用现有的（请参阅）