【问题标题】：Vue.js filter data by multiple filters on specific columnsVue.js 通过特定列上的多个过滤器过滤数据
【发布时间】：2016-04-03 16:13:01
【问题描述】：

在 vue.js 中，如何使用针对表上特定列的多个过滤器来过滤表。

例如，如果我有两个搜索字段 name 和 age 我如何绑定它们以搜索下表中的相应列。因此，如果用户在名称输入中输入名称，它应该只在名称列上搜索名称。如果用户也输入了一个年龄，那么它应该形成一个and 条件并在年龄列中搜索一个年龄。目前过滤器只是搜索整个表。

 <!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>

【问题讨论】：

标签： filter vue.js

【解决方案1】：

Vue 2

由于我们不再有过滤器，您需要使用计算属性。

所以你可以这样做：

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

然后您将循环通过 filteredPeople 而不是 people

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

Vue 1

如果您查看filterBy 的 API 文档中的第二个示例，您将看到将其限制为字段的能力。

你想要这样的东西：

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

【讨论】：

如果您试图使其成为 OR 条件怎么办？就像人们在组中，并且用户选择了 2 个或更多组，而您想要匹配任一组中的所有人？
您需要（并且应该）为此使用计算属性。
这非常有用。谢谢。伙计，我想念 V1 过滤器……他们为什么要删除它们？
@WhiteRau, Evan You 认为，虽然内置过滤器可能很有用，但最好让开发人员自己编程，以免代码库因死代码而膨胀