个性化阅读
专注于IT技术分析

解决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) }
赞(0) 打赏
未经允许不得转载:srcmini » 解决Vue问题:[Vue warn] Avoid mutating a prop…Prop being mutated list (found in component )
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏