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;线是我的控制台中的一条线，有什么方法可以超越它吗？
回答 3
Stack Overflow用户
发布于 2018-04-26 09:50:19
您不应该从组件本身突变道具。请参阅指南的单向数据流部分。您可以使用一个支柱作为初始值，然后在data部分中保留一个值并对其进行变异：
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', {
template: '<div>' +
'<button @click="toggleM">{{ btext }}</button>' +
'<input v-if="emode" />' +
'</div>',
props: ['editmode'],
data () {
return {
emode: this.editmode,
}
},
computed: {
btext () {
return this.emode ? "Text" : "Edit";
}
},
methods:{
toggleM() {
this.emode = !this.emode;
},
}
})
var app = new Vue({
el: '#app',
data: {
mode: true,
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<editbox :editmode="mode" />
</div>
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用户
发布于 2018-04-26 10:04:26
我将向父事件发回一个事件，以便它可以修改它的值：
例如(未测试)：
子组件
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>..。
methods:{
editModeChanged(value){
this.editmode = value
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50039474
复制相关文章
相似问题
腾讯云开发者
