我开始了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的新手，所以我完全不知道如何修复它。有人知道如何(请解释为什么)解决这个问题吗?
当前回答
我想给出这个答案，这有助于避免使用大量的代码，观察者和计算属性。在某些情况下，这可能是一个很好的解决方案:
道具是用来提供单向交流的。
当你有一个带有道具的模态显示/隐藏按钮时，对我来说最好的解决方案是发出一个事件:
<button @click="$emit('close')">Close Modal</button>
然后添加监听器到模态元素:
<modal :show="show" @close="show = false"></modal>
(在这种情况下，道具显示可能是不必要的，因为你可以直接在基本模式上使用简单的v-if="show")
其他回答
如果你想改变道具-使用对象。
<component :model="global.price"></component>
组件:
props: ['model'],
methods: {
changeValue: function() {
this.model.value = "new value";
}
}
Vue只是警告您:您更改了组件中的道具，但当父组件重新呈现时，“list”将被覆盖，您将丢失所有更改。所以这样做是危险的。
使用computed属性，如下所示:
Vue.component('task', {
template: '#task-template',
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")
单向数据流， 根据https://v2.vuejs.org/v2/guide/components.html，该组件遵循单向 数据流, 所有的道具在子属性和父属性之间形成了一个单向的向下绑定，当父属性更新时，它将向下流到子属性，而不是相反，这可以防止子组件意外地改变父属性，这可能会使你的应用程序的数据流更难理解。
此外，每次父组件更新所有的道具 子组件中的值将被刷新为最新值。这意味着您不应该试图改变子组件中的道具。如果你这样做了，vue会在 控制台。
通常有两种情况很容易对道具进行变异: prop用于传入一个初始值;子组件希望随后将其用作本地数据属性。 道具作为需要转换的原始值传递进来。 这些用例的正确答案是: 定义一个本地数据属性，使用prop的初始值作为其初始值:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性，从prop的值计算:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
除上述问题外，如有下列问题:
如果props值不是必需的，因此不总是返回，则传递的数据将返回undefined(而不是空)。这可能会混乱<select>默认值，我通过检查是否在beforeMount()设置的值来解决它(如果没有设置它)如下:
JS:
export default {
name: 'user_register',
data: () => ({
oldDobMonthMutated: this.oldDobMonth,
}),
props: [
'oldDobMonth',
'dobMonths', //Used for the select loop
],
beforeMount() {
if (!this.oldDobMonth) {
this.oldDobMonthMutated = '';
} else {
this.oldDobMonthMutated = this.oldDobMonth
}
}
}
Html:
<select v-model="oldDobMonthMutated" id="dob_months" name="dob_month">
<option selected="selected" disabled="disabled" hidden="hidden" value="">
Select Month
</option>
<option v-for="dobMonth in dobMonths"
:key="dobMonth.dob_month_slug"
:value="dobMonth.dob_month_slug">
{{ dobMonth.dob_month_name }}
</option>
</select>
