我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
我也遇到过这个问题。警告消失后，我使用$on和$emit。 它类似于使用$on和$emit来将数据从子组件发送到父组件。
其他回答
您不应该在子组件中更改props的值。 如果你真的需要改变它，你可以使用.sync。 就像这样
<您的组件:list.sync = "列表" > < /组件>
Vue.component('task', {
template: '#task-template',
props: ['list'],
created() {
this.$emit('update:list', JSON.parse(this.list))
}
});
new Vue({
el: '.container'
})
因为Vue道具是数据流的一种方式，这可以防止子组件意外地改变父组件的状态。
从Vue官方文档中，我们将找到两种方法来解决这个问题
if child component want use props as local data, it is best to define a local data property. props: ['list'], data: function() { return { localList: JSON.parse(this.list); } } The prop is passed in as a raw value that needs to be transformed. In this case, it’s best to define a computed property using the prop’s value: props: ['list'], computed: { localList: function() { return JSON.parse(this.list); }, //eg: if you want to filter this list validList: function() { return this.list.filter(product => product.isValid === true) } //...whatever to transform the list }
您应该始终避免在vue或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。
为例。 //而不是替换this的值。List使用不同的变量
这一点。new_data_variable = JSON.parse(this.list)
我个人总是建议，如果你需要改变道具，首先将它们传递给计算属性，然后从那里返回，然后就可以很容易地改变道具，即使在那你也可以跟踪道具的突变，如果它们是从另一个组件中突变的，或者我们也可以观察。
如果你想改变道具-使用对象。
<component :model="global.price"></component>
组件:
props: ['model'],
methods: {
changeValue: function() {
this.model.value = "new value";
}
}
