0
434
ViewsFiltrar tabla por valor de columna VueJS Array
Escribí esta función para filtrar por tipo de estado. Está funcionando, pero cada vez que filtro las filas de datos de la tabla desaparecen. Hay dos estados (Activo y Completado) Escribí este código para filtrar,
<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"}); } },Esta es la matriz que carga datos en la tabla desde un bucle for,
También dentro de 0: Object Hay otra matriz que contiene datos como los objetos anteriores de la captura de pantalla 
Totalmente, hay 3 filas para la tabla. Antes de llamar a la función de filtro, las 3 filas están visibles. pero cuando filtro una y otra vez reduce el número de filas de la tabla. De acuerdo con los datos dados, si filtro tres veces, no se muestran registros de tabla en la tabla. ayúdame gracias
2 answers
Answer question0
intente almacenar this.inspections en una variable local y luego filtre esa variable y almacene el resultado dentro de 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
El problema fue que modifiqué la matriz existente. Así que cada vez que filtro cambia. lo que significa que cambia los datos de la tabla original incluso si los asigno a una variable local. Así que le pasé un accesorio adicional a mi componente de trabajo y lo asigné a una variable local.