解决Vue问题：[Vue warn] Avoid mutating a prop…Prop being mutated list (found in component )

Main.js文件如下：

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    created() {
        this.list = JSON.parse(this.list);
    }
});
new Vue({
    el: '.container'
})

Vue报错：

vue.js:2574 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "list" (found in component )

解决办法：

在本地修改一个prop，正确的方式是在数据声明中使用prop值作为初始值的字段，然后修改副本，如下代码：

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

要注意的是，使用相同的prop和data是错误的，也就是下面的方式是错误的：

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