javascript - How do I search through multiple fields in Vue.js 2 - Stack Overflow

admin管理员组

文章数量:1289393

I am trying to search or filter through 3 fields firstname, lastname and email in my Vue.js 2 application. I understand that Vue 2 does not e with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this filterBy(list, value1, value2, value3) but it does not work.

This is my code

<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('/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();
  },
  ponents: {

  }
  }
  </script>

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

I am trying to search or filter through 3 fields firstname, lastname and email in my Vue.js 2 application. I understand that Vue 2 does not e with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this filterBy(list, value1, value2, value3) but it does not work.

This is my code

<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();
  },
  ponents: {

  }
  }
  </script>

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

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow asked Nov 30, 2017 at 12:05 Caleb OkiCaleb Oki 67522 gold badges1212 silver badges2929 bronze badges 1

• 1 You could take a look at this vue plugin - github./freearhey/vue2-filters – SpeekaDievs Commented Nov 30, 2017 at 12:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Extend your filterBy method to check more then just 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
    });
  },

But you can use puted to provide filtered results (it might perform better because it caches putations)

puted: {
  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
    })
  }
}

and use it in your template

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

The above method finds all strings STARTING with the word you are looking for and ignores all middle-sentence words.

This means that if you have a customer like Vincent Van Patten you will only find it by searching for Vincent or Vincent(space)Van. If you search for the word Van or Patten it will return an empty search because you are using indexOf inside filter.

This is why I would rather use JS includes():

puted: {
  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)
    })
  }
}

Any search like Van or Patten will now match

just to make it more flexibel do some lowercase:

puted: {
    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
        })
    }
}

本文标签： javascriptHow do I search through multiple fields in Vuejs 2Stack Overflow