如何在 Vue.js 2 中搜索多个字段

Question

我正在尝试在我的 Vue.js 2 应用程序中搜索或过滤 3 个字段 firstname、lastname 和 email。我知道 Vue 2 不像 Vue 1 那样带有内置的过滤器方法，因此我创建了一个只能过滤一个字段的自定义方法。如何将其扩展到多个字段？我尝试过类似filterBy(list, value1, value2, value3) 的方法，但它不起作用。

这是我的代码

<template>
<div class="customers container">
<input class="form-control" placeholder="Enter Last Name" v-
model="filterInput">
<br />
<table class="table table-striped">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="customer in filterBy(customers, filterInput)">
      <td>{{customer.first_name}}</td>
      <td>{{customer.last_name}}</td>
      <td>{{customer.email}}</td>
      <td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">View</router-link></td></tr>
  </tbody>
</table>

</div>
</template>

<script>

export default {
name: 'customers',
data () {
return {

  customers: [],
  filterInput:'',

}
},

methods: {
fetchCustomers(){
  this.$http.get('http://slimapp.dev/api/customers')
    .then(function(response){

      this.customers = (response.body); 
    });
 },

 filterBy(list, value){
    value = value.charAt(0).toUpperCase() + value.slice(1);
    return list.filter(function(customer){
      return customer.last_name.indexOf(value) > -1;
    });
  },


  },

  created: function(){
  if (this.$route.params.alert) {
  this.alert = $route.params.alert
  }
  this.fetchCustomers();
  },

  updated: function(){
  this.fetchCustomers();
  },
  components: {

  }
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>

Answer 1

扩展您的 filterBy 方法以检查更多内容，而不仅仅是 last_name

filterBy(list, value){
    value = value.charAt(0).toUpperCase() + value.slice(1);
    return list.filter(function(customer){
      return customer.first_name.indexOf(value) > -1 ||
             customer.last_name.indexOf(value) > -1 ||
             customer.email.indexOf(value) > -1
    });
  },

但您可以使用计算来提供过滤结果（它可能会执行得更好，因为它缓存了计算）

computed: {
  filteredList() {
    const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);
    return this.customers.filter(function(customer){
      return customer.first_name.indexOf(value) > -1 ||
             customer.last_name.indexOf(value) > -1 ||
             customer.email.indexOf(value) > -1
    })
  }
}

并在您的模板中使用它

<tr v-for="customer in filteredList">
 ...
</tr>

Answer 2

上述方法查找所有以您要查找的单词开头的字符串，并忽略所有中间句子单词。

这意味着如果您有像Vincent Van Patten 这样的客户，您只能通过搜索Vincent 或Vincent(space)Van 找到它。如果您搜索单词Van 或Patten，它将返回一个空搜索，因为您在过滤器中使用了indexOf。

这就是为什么我宁愿使用 JS includes():

computed: {
  filteredList() {
    const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);
    return this.customers.filter(function(customer){
      return customer.first_name.includes(value) ||
             customer.last_name.includes(value) ||
             customer.email.includes(value)
    })
  }
}

任何像 Van 或 Patten 这样的搜索现在都将匹配

Answer 3

只是为了让它更灵活一些小写：

computed: {
    filteredList() {
        const value = this.filterInput.toLowerCase().slice(1);
        return this.customers.filter(function(customer){
            return customer.first_name.toLowerCase().indexOf(value) > -1 ||
            customer.last_name.toLowerCase().indexOf(value) > -1 ||
            customer.email.toLowerCase().indexOf(value) > -1
        })
    }
}