[Vuejs]-Prop mutating warning in VUE

1👍

You shouldn’t mutate props from the component itself. See the One Way Data Flow section of the guide. You can use a prop as the initial value, and then keep a value in the data section and mutate that:

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

Demo

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>

1👍

You must use a data variable as a gateway to your prop.

In your component, the code code should look like this:

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

and the the inclusion of this component in your parent-component should look like this:

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

0👍

I would send back an event to the parent so it could modify its value:

For example (not tested):

Child Component

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

Parent

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

methods:{
    editModeChanged(value){
        this.editmode = value
    },
}

Leave a comment