Vue.js filterBy在多个字段中搜索

Question

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

我正在尝试这样的事情，但（当然）它不会起作用：

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

Answer 1

filterBy自定义过滤器未记录AFAIK，但您可以使用method制作自己的过滤器：

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>

Answer 2

由于Vue.js版本 0.12.11 ，因此可以使用：

<li v-repeat="user in users | filterBy searchText in 'name' 'phone'"></li>

请务必查看以下官方指南：http://vuejs.org/api/#orderBy

Answer 3

此问题通过＆＃34;计算属性＆＃34;：

解决

＆＃13;

＆＃13;

var app = new Vue({
    el: '#demo',
    data: {
        search: '',
        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'}
        ]
    },
    computed: {
        filteredPerson: function () {
            var self = this;
            return this.people.filter(function (person) {
                return person.name.toLowerCase().indexOf(self.search.toLowerCase()) >= 0
                || person.eyes.toLowerCase().indexOf(self.search.toLowerCase()) >= 0;
            });
        }
    }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/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 filteredPerson">
        <td>{{ person.name }}</td>
        <td>{{ person.eyes }}</td>
        <td>{{ person.age }}</td>
      </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;