Filter Vue.js通过特定列上的多个筛选器筛选数据_Filter_Vue.js

Filter Vue.js通过特定列上的多个筛选器筛选数据

filter vue.js

Filter Vue.js通过特定列上的多个筛选器筛选数据,filter,vue.js,Filter,Vue.js,在vue.js中，如何使用针对表中特定列的多个筛选器筛选表例如，如果我有两个搜索字段name和age，我如何绑定它们来搜索下表中的相应列。因此，如果用户在名称输入中输入名称，它应该只在名称列中搜索名称。如果用户也输入了年龄，则应形成和条件，并在年龄列中搜索年龄。目前，过滤器只搜索整个表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

在vue.js中，如何使用针对表中特定列的多个筛选器筛选表

例如，如果我有两个搜索字段

name

和

age

，我如何绑定它们来搜索下表中的相应列。因此，如果用户在名称输入中输入名称，它应该只在名称列中搜索名称。如果用户也输入了年龄，则应形成

和条件，并在年龄列中搜索年龄。目前，过滤器只搜索整个表
 <!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> 


Vue.js的广阔世界


名称
年龄
{{item.name}
{{item.age}
新Vue({
el:'演示'，
名称：“”，
年龄：''，
数据：{
人民:[
{姓名：约翰，年龄：50}，
{姓名：'Jane'，年龄：22}，
{姓名：'保罗'，年龄：34}，
{姓名：'Kate'，年龄：15}，
]
}
});
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)
    },
  },
}

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

然后，您将通过filteredPeople
而不是people

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

如果你想把它变成一个条件呢？例如，如果人员在组中，并且用户选择了2个或更多组，并且您希望匹配任一组中的所有人员？您需要（并且应该）为此使用计算属性。这非常有用。非常感谢。老兄，我想念你。。。他们为什么要删除它们？@WhiteRau，Evan You认为，虽然内置过滤器可能是有用的，但最好让开发人员自己对其进行编程，以免死掉的代码使其代码库膨胀