vue2 修改属性时报错

时间：2019-03-25 19:33:22 阅读：218 评论：0 收藏：0 [点我收藏+]

逛国外论坛时，遇到些有趣的问题，值得记录。

地址：https://stackoverflow.com/questions/39868963/vue-2-mutating-props-vue-warn

有位老哥想转义下获取的数据，但是程序报警告，之前没有遇到过，so:

代码如下：

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

报错如下：

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 <task>)

正确的解释：

在本地修改一个prop，在vue2中被认为是一种反模式。

应该这么做：当你想在本地修改一个prop时，应该在data里先声明一个字段，这个字段用来初始化和修改副本。

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

尤大大在vue的issue里也有解释：

https://github.com/vuejs/vue/issues/3836#issuecomment-251232850

行内属性类似于不可变值，因为每次父组件重新渲染时，可变的子属性都会被重置到行内。依赖可变的行内属性是不可行的。

所以，如果你想用行内属性作为初始化值，那就在data里声明一个字段用来赋值。

vue2 修改属性时报错

原文：https://www.cnblogs.com/easonw/p/10595605.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)