[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

Get Help
#1

How can i avoid this warning :

admin.js:32604 [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: "modalVar"

how to get ride of this warning because i don’t know how to get ride of this warning ?

Update

i used this code to get ride of it :

watch:{
  modalVar(){
      this.modal = this.modalVar;
  },
  modal(){
      if(this.modal == false){
      this.$parent.$emit('createmodalhide');
      }
  }

}

but i think this not the right way to do so :worried:

#2

You may create a computedProp/

computed: {
    modalProp: {
      get() { return this.modal},
      set(val) { this.$emit('update:modal', val)}
   }
}

so you need change this computedProp

modalVar(){
      this.modalProp = this.modalVar;
  },

and add :modal.sync to parameter on component in template. Parent component change this prop and send to children component.

1 Like
#3

This is nice explanation with :prop.sync that solve my issue

old:

this.propchanged = 123;
got error

new

this.$emit(‘update:propchanged’, 333);
no error

@nobodywithbody – same solution thx

alligator .io/vuejs/upgrading-vue-2.3/

will be nice if somebody update this document with this new nice feature

vuejs .org/v2/guide/components.html#One-Way-Data-Flow