I'm currently working on implementing filtering based on a prop value that changes according to the dropdown selection.
Here's my progress so far:
template(v-for="field in tableFields")
th(:id="field.name")
select(@change="filterScope(scope)" v-model="selectedScope")
option(v-for="scope in scopes" v-bind:value="scope" ) {{scope}}
template(v-for="(item) in tableData")
row(
:item="item"
)
The first template is for the table header, and the second one is for the table rows.
Currently, my table displays data like this:
Name Age Gender
Andrew 21 Male
Dan 21 Male
Kate 33 Female
All the data in these rows are stored in the tableData variable, which is a prop whose value is defined by the parent component. I want to enable dropdown selection for Age and Gender.
For instance, the dropdown for age will have options 21 and 33. If I choose 21, the table should display as follows:
Name Age Gender
Andrew 21 Male
Dan 21 Male
My current code looks like this, and I'm uncertain about how to proceed further:
methods: {
filterScope: function(scope) {
var resultArray = []
this.tableData.forEach(function(data){
if (data.age === this.selectedScope) {
resultArray.push(data)
}
}, this);
this.tableData = resultArray;
}
}
The error I'm encountering is:
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: "tableData"
This approach doesn't seem to work due to both the incorrect data filtering and the Vue warning. How can I properly filter the tableData?