When I attempted to move a section for filtering from the parent component to a child component, I encountered this error message: "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". Even though the template is rendering, typing in the input field triggers this 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..
}