Vue 2-变异道具vue-warn

Question

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的新手，所以我完全不知道如何解决它。任何人都知道如何（并请解释为什么）修复它？

Answer 1

这与以下事实有关： 在Vue 2中将局部更改 prop视为反模式

如果要在 本地 更改 prop，现在应该做的是在您的容器中声明一个data使用该props值作为其初始值的字段，然后对副本进行更改：

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});

您可以在Vue.js官方指南中了解更多有关此内容的信息

注意1： 请注意，您 不能为prop和使用相同的名称data，即：

data: function () { return { list: JSON.parse(this.list) } // WRONG!!

注2： 由于我觉得有一些混乱关于props和 反应，我建议你有一看这个线程