解决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) }

来源:

https://www.srcmini02.com/1810.html

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?