我开始了https://laracasts.com/series/learning-vue-step-by-step系列。我在Vue、Laravel和AJAX的课程上停了下来，出现了这个错误:
Vue .js:2574 [Vue警告]:避免直接改变道具，因为每当父组件重新呈现时，该值将被覆盖。相反，应该使用基于道具值的数据或计算属性。道具被突变:"list"(在组件中找到)
我在main.js中有这段代码
Vue.component('task', {
template: '#task-template',
props: ['list'],
created() {
this.list = JSON.parse(this.list);
}
});
new Vue({
el: '.container'
})
我知道，当我覆盖列表道具时，问题是在created()，但我是Vue的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
根据VueJs 2.0，您不应该改变组件内部的道具。它们只会被父母变异。因此，您应该在数据中定义不同名称的变量，并通过观察实际的道具来更新它们。 如果列表道具被父元素更改，您可以解析它并将其分配给mutableList。这里有一个完整的解决方案。
Vue.component('task', {
template: ´<ul>
<li v-for="item in mutableList">
{{item.name}}
</li>
</ul>´,
props: ['list'],
data: function () {
return {
mutableList = JSON.parse(this.list);
}
},
watch:{
list: function(){
this.mutableList = JSON.parse(this.list);
}
}
});
它使用mutableelist来呈现模板，这样就可以在组件中保证列表道具的安全。
其他回答
Vue只是警告您:您更改了组件中的道具，但当父组件重新呈现时，“list”将被覆盖，您将丢失所有更改。所以这样做是危险的。
使用computed属性，如下所示:
Vue.component('task', {
template: '#task-template',
props: ['list'],
computed: {
listJson: function(){
return JSON.parse(this.list);
}
}
});
这与这样一个事实有关:在Vue 2中，局部变异道具被认为是一种反模式
你现在应该做的是，如果你想在本地改变一个道具，在你的数据中声明一个字段，使用props值作为它的初始值，然后改变副本:
Vue.component('task', {
template: '#task-template',
props: ['list'],
data: function () {
return {
mutableList: JSON.parse(this.list);
}
}
});
你可以在Vue.js官方指南上阅读更多相关内容
注1:请注意，您的道具和数据不应使用相同的名称，即:
data: function () { return { list: JSON.parse(this.list) } } // WRONG!!
注2:因为我觉得有一些关于道具和反应性的困惑，我建议你看看这个帖子
是的!， ve2中的属性突变是一种反模式。但是… 只要打破规则，用其他规则，继续前进! 您需要做的是在父作用域的组件属性中添加.sync修饰符。
<your-awesome-components :custom-attribute-as-prob.sync="value" />
单向数据流， 根据https://v2.vuejs.org/v2/guide/components.html，该组件遵循单向 数据流, 所有的道具在子属性和父属性之间形成了一个单向的向下绑定，当父属性更新时，它将向下流到子属性，而不是相反，这可以防止子组件意外地改变父属性，这可能会使你的应用程序的数据流更难理解。
此外，每次父组件更新所有的道具 子组件中的值将被刷新为最新值。这意味着您不应该试图改变子组件中的道具。如果你这样做了，vue会在 控制台。
通常有两种情况很容易对道具进行变异: prop用于传入一个初始值;子组件希望随后将其用作本地数据属性。 道具作为需要转换的原始值传递进来。 这些用例的正确答案是: 定义一个本地数据属性，使用prop的初始值作为其初始值:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性，从prop的值计算:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
如果您正在使用Lodash，您可以在返回之前克隆道具。如果同时修改父节点和子节点上的道具，则此模式非常有用。
假设我们在组件网格上有道具列表。
在父组件中
<grid :list.sync="list"></grid>
在子组件中
props: ['list'],
methods:{
doSomethingOnClick(entry){
let modifiedList = _.clone(this.list)
modifiedList = _.uniq(modifiedList) // Removes duplicates
this.$emit('update:list', modifiedList)
}
}
