我开始了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值不是必需的，因此不总是返回，则传递的数据将返回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>
其他回答
除上述问题外，如有下列问题:
如果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>
这与这样一个事实有关:在Vue 2中，局部变异道具被认为是一种反模式
你现在应该做的是，如果你想在本地改变一个道具，在你的数据中声明一个字段，使用props值作为它的初始值，然后改变副本:
Vue.component('task', {
template: '#task-template',
props: ['list'],
data: function () {
return {
mutableList: JSON.parse(this.list);
}
}
});
你可以在Vue.js官方指南上阅读更多相关内容
注1:请注意，您的道具和数据不应使用相同的名称，即:
data: function () { return { list: JSON.parse(this.list) } } // WRONG!!
注2:因为我觉得有一些关于道具和反应性的困惑，我建议你看看这个帖子
Vue3有一个很好的解决方案。花了好几个小时才到那里。但是效果很好。
在父模板上
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
></user-name>
子组件
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
template: `
<input
type="text"
:value="firstName"
@input="$emit('update:firstName',
$event.target.value)">
<input
type="text"
:value="lastName"
@input="$emit('update:lastName',
$event.target.value)">
`
})
这是唯一能双向结合的解。我喜欢前两个答案，以良好的方式使用同步和发射更新事件，并计算属性getter setter，但这是一个工作要做的，我不喜欢这么努力工作。
您应该始终避免在vue或任何其他框架中改变道具。您可以采用的方法是将其复制到另一个变量中。
为例。 //而不是替换this的值。List使用不同的变量
这一点。new_data_variable = JSON.parse(this.list)
再加上最好的答案，
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。如果未定义，则解析错误。
