我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
将props分配给new变量。
data () {
return {
listClone: this.list
}
}
其他回答
我也遇到过这个问题。警告消失后，我使用$on和$emit。 它类似于使用$on和$emit来将数据从子组件发送到父组件。
您应该始终避免在vue或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。
为例。 //而不是替换this的值。List使用不同的变量
这一点。new_data_variable = JSON.parse(this.list)
您需要像这样添加computed方法
component.vue
props: ['list'],
computed: {
listJson: function(){
return JSON.parse(this.list);
}
}
我想给出这个答案，这有助于避免使用大量的代码，观察者和计算属性。在某些情况下，这可能是一个很好的解决方案:
道具是用来提供单向交流的。
当你有一个带有道具的模态显示/隐藏按钮时，对我来说最好的解决方案是发出一个事件:
<button @click="$emit('close')">Close Modal</button>
然后添加监听器到模态元素:
<modal :show="show" @close="show = false"></modal>
(在这种情况下，道具显示可能是不必要的，因为你可以直接在基本模式上使用简单的v-if="show")
Vue.component('task', {
template: '#task-template',
props: ['list'],
computed: {
middleData() {
return this.list
}
},
watch: {
list(newVal, oldVal) {
console.log(newVal)
this.newList = newVal
}
},
data() {
return {
newList: {}
}
}
});
new Vue({
el: '.container'
})
也许这个能满足你的需要。
