Опора мутировавшего предупреждения в VUE

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"

С этим, попробовал предложение здесь , но не могу заставить его работать. Ниже моя работа:

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; - это та, которая указана в моей консоли, есть ли способ, как я могу превзойти это?

Answer 1

Вы должны использовать переменную 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>

Answer 2

Я бы отправил событие родителю, чтобы оно могло изменить его значение:

Например (не проверено):

Дочерний компонент

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

Answer 3

Вы не должны мутировать реквизит самого компонента. См. Раздел Поток данных в одном направлении данного руководства. Вы можете использовать реквизит в качестве начального значения, а затем сохранить значение в разделе 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>