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来提供过滤结果（它可能会更好地执行，因为它会缓存计算）

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，则将返回空搜索，因为您正在过滤器中使用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这样的任何搜索现在都可以匹配

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

3 个答案: