Vue.js filter data by multiple filters on specific columns

Question

In vue.js how can you filter a table using mutiple filters that target a specific column on the table.

For example if I have two search fields name and age how can I bind them to search the respective columns on the table below. So if user enters a name in the name input it should only search for a name on the name column. If the user enters an age as well then it should form an and condition and search for an age in the age column. Currently the filters simply search the entire table.

 <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>The Vast World of Vue.js</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        </head>

        <body id="demo" class="container">

            <input v-model="name" class="form-control" placeholder="search by name"><br>

            <input v-model="age" class="form-control" placeholder="search by age">

            <table class="table table-striped">

                <thead>
                    <tr>
                        <th >
                            Name
                        </th>
                        <th >
                            Age
                        </th>
                </thead>
                <tbody>
                    <tr v-for="item in people | filterBy name | filterBy age">
                        <td>{{ item.name }}</td>
                        <td>{{ item.age }}</td>
                    </tr>
                </tbody>
            </table>

            <script src="http://vuejs.org/js/vue.js"></script>

            <script>
               new Vue({

                        el: '#demo',

                        name: '',

                        age: '',

                        data: {

                            people: [
                                { name: 'John', age: 50 },
                                { name: 'Jane', age: 22 },
                                { name: 'Paul', age: 34 },
                                { name: 'Kate', age: 15 },
                            ]
                        }

                    });


            </script>
        </body>
        </html>

Bill Criswell Bill Criswell · Accepted Answer · 2015-12-29T18:32:16

Vue 2

Since we don't have filters anymore, you'd need to use a computed property.

So you can do something like:

{
  data: {
    people: [{ name: }],
    age: 28,
    name: 'bi',
  }
  computed: {
    filteredPeople () {
      const { name, age, people } = this
      return this.people
        .filter(person => person.name.toLowerCase().indexOf(name.toLowerCase()) > -1)
        .filter(person => person.age === age)
    },
  },
}

Then you'd loop through filteredPeople instead of people

<tr v-for="person in filteredPeople">...</tr>

Vue 1

If you take a look at the second example in API documentation for filterBy you'll see the ability to limit it to a field.

You'd want something like:

item in people | filterBy name in 'name' | filterBy age in 'age'

Vue.js filter data by multiple filters on specific columns

1 Answers

Vue 2

Vue 1