我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
您需要像这样添加computed方法
component.vue
props: ['list'],
computed: {
listJson: function(){
return JSON.parse(this.list);
}
}
其他回答
您应该始终避免在vue或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。
为例。 //而不是替换this的值。List使用不同的变量
这一点。new_data_variable = JSON.parse(this.list)
如果您正在使用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)
}
}
当TypeScript是你的首选lang。的发展
<template>
<span class="someClassName">
{{feesInLocale}}
</span>
</template>
@Prop({default: 0}) fees: any;
// computed are declared with get before a function
get feesInLocale() {
return this.fees;
}
而不是
<template>
<span class="someClassName">
{{feesInLocale}}
</span>
</template>
@Prop() fees: any = 0;
get feesInLocale() {
return this.fees;
}
我也遇到过这个问题。警告消失后，我使用$on和$emit。 它类似于使用$on和$emit来将数据从子组件发送到父组件。
再加上最好的答案，
Vue.component('task', {
template: '#task-template',
props: ['list'],
data: function () {
return {
mutableList: JSON.parse(this.list);
}
}
});
通过数组设置道具是为了开发/原型，在生产中确保设置道具类型(https://v2.vuejs.org/v2/guide/components-props.html)，并设置一个默认值，以防道具没有被父元素填充。
Vue.component('task', {
template: '#task-template',
props: {
list: {
type: String,
default() {
return '{}'
}
}
},
data: function () {
return {
mutableList: JSON.parse(this.list);
}
}
});
这样你至少可以在mutableList中得到一个空对象，而不是JSON。如果未定义，则解析错误。
