0
443
ViewsFilter Table by column value VueJS Array
I wrote this function to filter by status type. It's working but every time I filter the table data rows get disappeared. There're two status ( Active and Completed ) I wrote this code for filter,
<div class="DropContent">
<label class="LabelView">Status</label><br />
<select class="dropdown-size form-control" v-model="ins_status" v-on:change="filterData">
<option v-for="(option, i) in optionFilter" :value="i">
{{ option }}
</option>
</select>
</div>
filterData(evt) {
var val = evt.target.value;
if(val==0){
this.inspections = this.inspections.filter(function(e){return e.status = "Scheduled"});
}if(val==1){
this.inspections = this.inspections.filter(function(e){return e.status != "Scheduled"});
}
},
This is the array that load data to table from a for loop,
Also inside 0: Object There's another array which contains data like above objects from the screenshot
So totally there're 3 rows for the table. Before calling filter function, all 3 rows are visible. but when I filter again and again it reduces the no of rows of the table. According to given data if I filter three times no table records are shown in the table. Help me thanks.
2 answers
Answer question0
try to store this.inspections in a local variable and then filter that variable and store the result inside this.inspections.
filterData(evt) {
var val = evt.target.value;
var inspections = this.inspections; // save inspections in local variable
if(val==0){
this.inspections = inspections.filter(function(e){return e.status = "Scheduled"});
} if(val==1){
this.inspections = inspections.filter(function(e){return e.status != "Scheduled"});
}
}
0
The problem was I modified the existing array. So each time I filter it changes. which means it changes the original table data even I assign it to a local variable. So I passed an extra prop to my working component and assigned it to a local variable.