Vue.js filterBy 多字段搜索 [英] Vue.js filterBy to search in multiple fields

问题描述

如何通过搜索多个搜索键进行过滤?

我正在尝试这样的事情，但(当然)它不起作用:

<tr v-repeat="questions | filterBy search in 'reference','user.name','shop.shopName'">

解决方案

filterBy 自定义过滤器没有记录在 AFAIK，但您可以使用 method 来制作自己的过滤器:

var demo = new Vue({el: '#demo',数据: {搜索:'是',人们: [{姓名:'Koos'，年龄:30，眼睛:'红色'}，{名称:'格特'，年龄:20，眼睛:'蓝色'}，{姓名:'彼得'，年龄:12，眼睛:'绿色'}，{姓名:'Dawid'，年龄:67，眼睛:'深绿色'}，{姓名:'约翰'，年龄:15，眼睛:'紫色'}，{姓名:'汉斯'，年龄:12，眼睛:'粉红色'}]},方法: {自定义过滤器:功能(人){返回 person.name.indexOf(this.search) != -1||person.eyes.indexOf(this.search) != -1;}},})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script><div id="演示"><input type="text" class="form-control" v-model="search"/><br/><table class="table"><头><tr><th>name</th><th>眼睛</th>＜年龄＞</tr></thead><tr v-for="person in people | filterBy customFilter"><td>{{person.name }}</td><td>{{person.eyes }}</td><td>{{person.age }}</td></tr>

How can I filter by searching in multiple search keys?

I'm trying something like this, but (of course) it won't work:

<tr v-repeat="questions | filterBy search in 'reference','user.name','shop.shopName'">

解决方案

The filterBy custom filter is not documented AFAIK, but you can use a method to make your own filter:

var demo = new Vue({
    el: '#demo',
    data: {
        search: 're',

        people: [
          {name: 'Koos', age: 30, eyes:'red'},
          {name: 'Gert', age: 20, eyes:'blue'},
          {name: 'Pieter', age: 12, eyes:'green'},
          {name: 'Dawid', age: 67, eyes:'dark green'},
          {name: 'Johan', age: 15, eyes:'purple'},
          {name: 'Hans', age: 12, eyes:'pink'}
        ]
    },
    methods: {
      customFilter: function(person) {
          return person.name.indexOf(this.search) != -1
          || person.eyes.indexOf(this.search) != -1
          ;
      }
    },
   
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
    <input type="text" class="form-control" v-model="search"/>
    
    <br/>
    <table class="table">
      <thead>
        <tr>
          <th>name</th>
          <th>eyes</th>
          <th>age</th>
        </tr>
      </thead>
      <tr v-for="person in people | filterBy customFilter">
        <td>{{ person.name }}</td>
        <td>{{ person.eyes }}</td>
        <td>{{ person.age }}</td>
      </tr>
  </table>
</div>

这篇关于Vue.js filterBy 多字段搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！