按列值过滤 Table VueJS 数组

Question

我写了这个函数来按状态类型过滤。它正在工作，但每次我过滤 table 数据行都会消失。有两种状态（活动和完成）我为过滤器编写了这段代码，

                    <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"});    
                     }
                  },

这是从 for 循环将数据加载到 table 的数组，

也在0: Object里面还有另一个数组，其中包含屏幕截图中的上述对象的数据

table 总共有 3 行。在调用过滤器函数之前，所有 3 行都是可见的。但是当我一次又一次地过滤时，它减少了 table 的行数。根据给定的数据，如果我过滤三次，table 中将不会显示 table 条记录。帮帮我谢谢。

Answer 1

尝试将 this.inspections 存储在局部变量中，然后过滤该变量并将结果存储在 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"});    
  }
}

Answer 2

问题是我修改了现有数组。所以每次我过滤它都会改变。这意味着即使我将其分配给局部变量，它也会更改原始 table 数据。所以我将一个额外的道具传递给我的工作组件并将其分配给一个局部变量。

按列值过滤 Table VueJS 数组

Filter Table by column value VueJS Array

javascript

vue.js

vuejs2