Javascript 在Vue Js中呈现表上的多个过滤器

我试图在

Vuejs

中构建一个表过滤器，根据需要过滤表，我有两个单独的输入字段，过滤一个常用表我的表代码如下：

<div class="col-sm-4">
    <div class="form-group">
        <label class="control-label">Search by company name</label>
        <input type="text" v-model="search_by_name" placeholder="Search by company name" class="form-control">
    </div>
</div>
<div class="col-sm-2">
    <div class="form-group">
        <label class="control-label">Search by email</label>
        <input type="text" v-model="search_by_email" placeholder="Search by email" class="form-control">
    </div>
</div>
<div class="col-sm-3">
    <div class="form-group">
        <label class="control-label" for="tags">Search by tags</label>
        <select name="status" id="tags" class="form-control">
            <option value="1" selected="">Completed</option>
            <option value="0">Pending</option>
        </select>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-striped">
        <tbody>
            <tr v-for="item in tableFilter">
               <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.number }}</td>
                <td>{{ item.email }}</td>
                <td><router-link :to="{name: 'company-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link></td>
                <td><a @click.prevent="deleteCompany(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>

目前名称搜索正在按要求正常工作，我想将此搜索与电子邮件搜索绑定，类似于

this。如html部分所述，通过电子邮件

或

下拉列表

进行搜索

您需要在选择中为值建模

  <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
      <option value="1">Completed</option>
      <option value="0">Pending</option>
  </select>

newvue({
el:“#应用程序”，
数据：{
按名称搜索：“名称”，
通过电子邮件搜索“”，
挂起的\u或\u已完成：“1”，
型号：{
数据：[{
id:1，
名称：“一”，
电邮:'foo@one.com',
状态：“1”
},
{
id:2，
姓名:"两",，
电邮:'bar@two.com',
状态：“0”
},
{
id:5，
姓名:"五",，
电邮:'the@five.edu',
状态：“0”
}
]
}
},
计算：{
tableFilter（）{
if（this.model.data）{
返回此.model.data.filter（（item）=>item.name.includes（this.search_by_name）和&item.email.includes（this.search_by_email）和&item.status==此.pending_或_completed）；
}
}
}
});

按公司名称搜索
通过电子邮件搜索
按标签搜索
完整的
悬而未决的
{{item.id}
{{item.name}
{{item.city}
{{item.number}
{{item.email}
您正在获取的数据是什么样子的？如果先在表单中设置此值，您不需要更改吗？他可以使用一个或多个值的组合进行过滤。
  <select name="status" id="tags" class="form-control" v-model="pending_or_completed">
      <option value="1">Completed</option>
      <option value="0">Pending</option>
  </select>

tableFilter() {
  if (this.model.data) {
    return this.model.data.filter((item) => 
      item.name.includes(this.search_by_name)
      && item.email.includes(this.search_by_email)
      && item.status === this.pending_or_completed);
  }
}