Laravel VUE中的道具变异警告

我收到一个vue警告（由于我的代码不起作用，导致我端出现错误），上面说：

[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: "editmode"

有了它，他尝试了这个建议，但没有成功。以下是我的工作：

props:{
    editmode:{
        type: Boolean,
        default: false,
    }
},
methods:{
    toggleM(){
        var editmode = this.editmode;
        editmode = !editmode;
        this.editmode = editmode; 
        if(editmode == false){
            //dothis
        }else{
            //dothat
        }
    },
}

模板

<template>
<div class="ui-table-container-body">
        <div class="ui-table" v-if="Boolean(items.length) || Boolean(Object.keys(items).length)" v-cloak>
            <ui-table-body ref="body" v-model="items"
                :editmode="editmode"
                >
            </ui-table-body>
        </div>
    </div>
</template>

---

行

this.editmode=editmode

是我控制台中的一个，我有什么办法可以超越它吗？

你不应该从组件本身变异道具。请参阅本指南的一节。您可以使用道具作为初始值，然后在

数据

部分保留一个值，并对其进行修改：

props: {
    editmode: {
        type: Boolean,
        default: false,
    }
},
data () {
    return {
        emode: this.editmode,
    }
},
methods: {
    toggleM () {
        let editmode = this.emode;
        editmode = !editmode;
        this.emode = editmode; 
        if (editmode == false) {
            // dothis
        } else {
            // dothat
        }
    },
}

演示

Vue.component（'editbox'{
模板：“”+
“{{btext}}”+
'' +
'',
道具：['editmode']，
数据（）{
返回{
emode:this.editmode，
}
},
计算：{
b文本（）{
返回this.emode？“文本”：“编辑”；
}
},
方法：{
toggleM（）{
this.emode=！this.emode；
},
}
})
var app=新的Vue({
el:“#应用程序”，
数据：{
模式：对，
}
})

---

必须使用

数据

变量作为

道具

的网关

在组件中，代码应如下所示：

道具：{
编辑模式：{
类型：布尔型，
默认值：false，
}
},
数据：{
dataEditMode=false
},
观察：{
“编辑模式”：{
处理程序：“onEditmodeChanged”，
立即：是的，
},
“dataEditMode”：{
处理程序：“onDataEditModeChanged”
}
},
方法：{
toggleM（）{
var editmode=this.dataEditMode；
editmode=！editmode；
this.dataEditMode=editmode；
if（editmode==false）{
//多蒂斯
}否则{
//多塞
}
},
onEditmodeChanged（newVal）{
this.dataEditMode=newVal
},
onDataEditModeChanged（newVal）{
此.$emit（'editmodeChanged'，newVal）
}
}

我将向父级发回一个事件，以便它可以修改其值：

例如（未测试）：

子组件

props:{
    editmode:{
        type: Boolean,
        default: false,
    }
},
methods:{
    toggleM(){
        var editmode = !this.editmode;
        this.$emit('changeEditMode', editmode);
        if (editmode == false){
            //dothis
        } else {
            //dothat
        }
    },
}

<child-component @changeEditMode="editModeChanged" :editmode="editmode"></child-component>

家长

props:{
    editmode:{
        type: Boolean,
        default: false,
    }
},
methods:{
    toggleM(){
        var editmode = !this.editmode;
        this.$emit('changeEditMode', editmode);
        if (editmode == false){
            //dothis
        } else {
            //dothat
        }
    },
}

<child-component @changeEditMode="editModeChanged" :editmode="editmode"></child-component>

---

视情况而定，是否要更改传递道具的父级上的道具值？或者只是设置一个局部值？你不能直接改变道具。您必须使用

数据

变量和

监视

道具的突变，以将其应用于数据和

监视

数据的突变到

$emit

事件，并在父级中变异道具component@CUGreen必须更改传递道具的父级上的道具值，并且必须有一个副本本地。@LeCintas我怎么可能做到？（d）不，应避免组件本身的属性突变。此解决方案也无法解决父级重新变异属性的问题。警告仍然发出。糟糕，我刚刚编辑了代码。这是一个错误：我复制/粘贴了自动记录code@LeCintas我现在可以编辑字段，但现在在控制器中抛出一个错误<代码>“消息”：“未定义索引：id”，“状态代码”：500，…@ramedju这是一个不同的问题：这是一个内部服务器错误。我猜您正在向您的客户发送不完整的数据server@LeCintas请查看我上面更新的问题，我可以在哪里使用您的建议，我现在被蜘蛛网包围，我不知道该从哪里继续。您必须在

v-if

字段中参考

此.emode

（来自

数据

），不使用编辑模式（道具）。这是什么意思？（醉酒）在演示片段中演示了当我添加这一行时，我的表格不再显示：我已经用我的模板更新了我的问题。如果你能帮我看看的话。谢谢。编辑模式切换，但我无法编辑字段：S。它甚至没有进入方法

editModeChanged

。在这里使用上述代码时，请查看我的问题