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 - 组件数据不会更新

回答

相关问题