VUE中道具突变警告
VUE中道具突变警告
提问于 2018-04-26 09:28:58
我收到了一个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;线是我的控制台中的一条线，有什么方法可以超越它吗？
Stack Overflow用户
发布于 2018-04-26 09:50:33
您必须使用data变量作为通往prop的网关。
在组件中，代码代码应该如下所示：
props:{
editmode:{
type: Boolean,
default: false,
}
},
data: {
dataEditMode = false
},
watch: {
'editmode': {
handler: 'onEditmodeChanged',
immediate: true,
},
'dataEditMode': {
handler: 'onDataEditModeChanged'
}
},
methods:{
toggleM(){
var editmode = this.dataEditMode;
editmode = !editmode;
this.dataEditMode = editmode;
if(editmode == false){
//dothis
}else{
//dothat
}
},
onEditmodeChanged (newVal) {
this.dataEditMode = newVal
},
onDataEditModeChanged (newVal) {
this.$emit('editmodeChanged', newVal)
}
}
在父组件中包含这个组件应该如下所示：
<my-component-name :editmode="editmode" @editmodeChanged="(e) => { editmode = e }"></my-component-name>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50039474
复制相关文章
相似问题
腾讯云开发者
