Question

我收到了一个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"

有了它，尝试了建议here，但无法使其发挥作用。以下是我的工作：

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

TEMPLATE

<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;是我控制台中指向的行，有什么方法可以超越它吗？</ p>

Answer 1

你不应该改变组件本身的道具。请参阅指南的One Way Data Flow部分。您可以使用prop作为初始值，然后在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
        }
    },
}

演示

＆＃13;

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,
  }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <editbox :editmode="mode" />
</div>

＆＃13;

Answer 2

您必须使用data变量作为prop的网关。

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

＆＃13;

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

＆＃13;

并且在父组件中包含此组件应如下所示：

<my-component-name :editmode="editmode" @editmodeChanged="(e) => { editmode = e }"></my-component-name>

Answer 3

我会向父母发送一个事件，以便它可以修改它的值：

例如（未经测试）：

子组件

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
    },
}

支持在VUE中改变警告

3 个答案:

演示