我开始了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的新手,所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
Vue.js的道具不能被改变,因为这被认为是Vue中的反模式。
您需要采取的方法是在组件上创建一个引用list的原始prop属性的data属性
props: ['list'],
data: () {
return {
parsedList: JSON.parse(this.list)
}
}
现在传递给组件的列表结构通过组件的data属性被引用和改变:-)
如果您希望做的不仅仅是解析列表属性,那么请使用Vue组件的computed属性。
这允许你对你的道具做出更深入的变化。
props: ['list'],
computed: {
filteredJSONList: () => {
let parsedList = JSON.parse(this.list)
let filteredList = parsedList.filter(listItem => listItem.active)
console.log(filteredList)
return filteredList
}
}
上面的示例将解析您的列表道具,并将其过滤为仅活跃的list-tems,将其记录为schnitts和giggles并返回它。
注意:数据和计算属性在模板中引用相同
<pre>{{parsedList}}</pre>
<pre>{{filteredJSONList}}</pre>
很容易认为计算属性(作为一个方法)需要被调用…它不
您不应该在子组件中更改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
}