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

Question

我正在嘗試在Vue.js 2應用程序中搜索或過濾3個字段的名字，姓氏和電子郵件 。 我知道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

只是為了使其更加靈活一些，請使用小寫字母：

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
        })
    }
}

Answer 3

上面的方法找到所有以您要查找的單詞開頭的字符串，並忽略所有中間句單詞。

這意味着，如果您有像Vincent Van Patten這樣的客戶，則只能通過搜索Vincent或Vincent(space)Van來找到它。 如果您搜索單詞Van或Patten ，則將返回空搜索，因為您正在使用filter內部的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類的任何搜索現在都將匹配