小编典典

Vue 2-变异道具vue-warn

javascript

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


阅读 362

收藏
2020-05-01

共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和 反应,我建议你有一看这个线程

2020-05-01