Prop being mutated VueJs

0
votes

I get this error: "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: "filter" ",after I tried to move a section for fitering from parent to a child. The template is rendering, but when I type in the input I got that error.

In Child

<b-form-input
         v-model="filter"
         type="search"
         id="filterInput"
         placeholder="Type to Search"
    ></b-form-input>
<b-button :disabled="!filter" @click="filter = ''">Clear</b-button>

export default {
    name:'ExampleSearch',
    props:['filter'],

}

In Parent

   <ExampleSearch></ExampleSearch>

    <b-table
            ...code....
            :fields="fields"
            ...code....
    >

getExample(context) {
   ..code..
   if (typeof context !== 'undefined' && context.filter) {
         url += `&filter=${context.filter}`;
   }
   ..code..
}
2
javascriptvue.jsbootstrap-vue

2 Answers

1
votes

The click event at <b-button :disabled="!filter" @click="filter = ''">Clear</b-button> is mutating filter prop at parent directly from child. That's why you are getting this error.

To avoid this you can modify click event listener as below where you emit the event to parent 

...
<b-button :disabled="!filter" @click="$emit('clearFilter')">Clear</b-button>
...

And then at parent you can listen to this event via 

...
<ExampleSearch :filter="filter" @clearFilter="filter=''" ></ExampleSearch>
...

If you are using vue 2.3.0 you can use .sync modifier which is shorthand for above expression. Read more about it here

0
votes

Assign your props to a data to avoid that error.

data() {
 return {
  newFilter: this.filter
 }
}