Vue,Laravel和AJAX 时 遇到 了以下错误:
vue.js:2574 [Vue警告]:避免直接更改道具,因为每当父组件重新渲染时,该值就会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具:“列表”(位于component中)
我在 main.js中* 有此代码 *
Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); } }); new Vue({ el: '.container' })
我知道当我覆盖列表属性时问题出在created()中,但是我是Vue的新手,所以我完全不知道如何解决它。任何人都知道如何(并请解释为什么)修复它?
这与以下事实有关: 在Vue 2中将局部更改 prop视为反模式
如果要在 本地 更改 prop,现在应该做的是在您的容器中声明一个data使用该props值作为其初始值的字段,然后对副本进行更改:
data
props
Vue.component('task', { template: '#task-template', props: ['list'], data: function () { return { mutableList: JSON.parse(this.list); } } });
您可以在Vue.js官方指南中了解更多有关此内容的信息
注意1: 请注意,您 不能为prop和使用相同的名称data,即:
prop
data: function () { return { list: JSON.parse(this.list) } // WRONG!!
注2: 由于我觉得有一些混乱关于props和 反应,我建议你有一看这个线程