我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
当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;
}
其他回答
您不应该在子组件中更改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或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。
为例。 //而不是替换this的值。List使用不同的变量
这一点。new_data_variable = JSON.parse(this.list)
如果你想改变道具-使用对象。
<component :model="global.price"></component>
组件:
props: ['model'],
methods: {
changeValue: function() {
this.model.value = "new value";
}
}
答案很简单，您应该通过将值分配给一些局部组件变量(可以是数据属性，用getter、setter或观察者计算)来打破直接的prop突变。
这里有一个使用监视器的简单解决方案。
<template>
<input
v-model="input"
@input="updateInput"
@change="updateInput"
/>
</template>
<script>
export default {
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
input: '',
};
},
watch: {
value: {
handler(after) {
this.input = after;
},
immediate: true,
},
},
methods: {
updateInput() {
this.$emit('input', this.input);
},
},
};
</script>
我用它来创建任何数据输入组件，它工作得很好。从父元素发送的任何新数据(v-model(ed))都将被值监视器监视并分配给输入变量，一旦接收到输入，我们就可以捕捉该操作并向父元素发出输入，表明数据是从表单元素输入的。
Vue.js认为这是一个反模式。例如，声明和设置一些道具
this.propsVal = 'new Props Value'
所以为了解决这个问题，你必须从数据或Vue实例的计算属性的道具中获取一个值，就像这样:
props: ['propsVal'],
data: function() {
return {
propVal: this.propsVal
};
},
methods: {
...
}
这肯定有用。
