我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
下面是一个小吃店组件，当我把小吃店变量直接输入v-model，就像这样，如果将工作，但在控制台中，它会给出一个错误
避免直接改变道具，因为每当父组件重新呈现时，该值将被覆盖。相反，应该使用基于道具值的数据或计算属性。
<template>
<v-snackbar v-model="snackbar">
{{ text }}
</v-snackbar>
</template>
<script>
export default {
name: "loader",
props: {
snackbar: {type: Boolean, required: true},
text: {type: String, required: false, default: ""},
},
}
</script>
消除这种变异错误的正确方法是使用监测器
<template>
<v-snackbar v-model="snackbarData">
{{ text }}
</v-snackbar>
</template>
<script>
/* eslint-disable */
export default {
name: "loader",
data: () => ({
snackbarData:false,
}),
props: {
snackbar: {type: Boolean, required: true},
text: {type: String, required: false, default: ""},
},
watch: {
snackbar: function(newVal, oldVal) {
this.snackbarData=!this.snackbarDatanewVal;
}
}
}
</script>
在加载小吃店的主组件中，你可以执行这段代码
<loader :snackbar="snackbarFlag" :text="snackText"></loader>
这对我很有用
其他回答
是的!， ve2中的属性突变是一种反模式。但是… 只要打破规则，用其他规则，继续前进! 您需要做的是在父作用域的组件属性中添加.sync修饰符。
<your-awesome-components :custom-attribute-as-prob.sync="value" />
一个潜在的解决方案是使用全局变量。
import { Vue } from "nuxt-property-decorator";
export const globalStore = new Vue({
data: {
list: [],
},
}
export function setupGlobalsStore() {
Vue.prototype.$globals = globalStore;
}
然后你可以用:
$globals.list
任何你需要变异或呈现它的地方。
如果你想改变道具-使用对象。
<component :model="global.price"></component>
组件:
props: ['model'],
methods: {
changeValue: function() {
this.model.value = "new value";
}
}
我想给出这个答案，这有助于避免使用大量的代码，观察者和计算属性。在某些情况下，这可能是一个很好的解决方案:
道具是用来提供单向交流的。
当你有一个带有道具的模态显示/隐藏按钮时，对我来说最好的解决方案是发出一个事件:
<button @click="$emit('close')">Close Modal</button>
然后添加监听器到模态元素:
<modal :show="show" @close="show = false"></modal>
(在这种情况下，道具显示可能是不必要的，因为你可以直接在基本模式上使用简单的v-if="show")
Vue只是警告您:您更改了组件中的道具，但当父组件重新呈现时，“list”将被覆盖，您将丢失所有更改。所以这样做是危险的。
使用computed属性，如下所示:
Vue.component('task', {
template: '#task-template',
props: ['list'],
computed: {
listJson: function(){
return JSON.parse(this.list);
}
}
});
