Vue.js - 组件数据不更新

Posted 2023-02-22

【中文标题】Vue.js - 组件数据不更新

【英文标题】：Vue.js - components data do not update

【发布时间】：2017-06-28 20:18:16

【问题描述】：

我有一个基于数组的 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 d​​ata 属性？

【问题讨论】：

在这种情况下你不应该使用computed property吗？

@UnholySheep 是的！谢谢。我对 vuejs 真的很陌生，我不知道计算属性，它现在可以工作了。万分感谢！ codepen.io/anything/pen/GrwNew

@UnholySheep，您可以添加您的答案以便投票并帮助其他人吗？

【参考方案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 属性更改时（正确）重新计算。

【讨论】：

这是正确的，但现在我有另一个问题：如果某个属性不是来自父母数据，我如何更新特定值并且要维护：codepen.io/anything/pen/vgQgeM 这有一个点击事件，它会更新一个值。这是针对特定项目更新的，但是当我拥有数组时它仍然存在。有什么想法吗？

@AdrianFlorescu 我不是 100% 确定我理解你想要达到的目标（你可能应该为此创建一个新问题）。如果您想将“组件本地”变量（通过 data 定义）与来自 prop 的变量组合，您可以在计算的变量中执行此操作（而不是直接修改计算值） - 例如：computed_id: function() return this.item.id + this.id; （其中this.id 将是在组件 data 部分中定义的变量）。如果这不是您的目标，您可能应该创建一个新问题。

我应该创建一个新问题，但要回答您的问题，请查看上方的笔并单击任意行。值会更新，但是当我更改数组时，我希望该值消失。不知道为什么即使您更改数组也会在完全相同的行上生病。

@AdrianFlorescu 在您的笔中，计算属性不再以任何方式连接到道具（您访问的是this.id，而不是道具this.item.id），因此没有任何内容可以修改财产。由于 Vue 如何处理渲染列表的更新（在后台），它会停留在完全相同的行上——它不会从头开始重新创建它们，它会重用现有的列表（参见 docs）