Vue.js filterBy 多字段搜索

标签 vue.js

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

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

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

最佳答案

filterBy 自定义过滤器没有文档 AFAIK,但您可以使用方法来制作您自己的过滤器:

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 多字段搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31157913/

相关文章:

javascript - 使用 Vue.JS/Axios 和来自第三方 API(基于 Django!)的数据填充 DOM

javascript - 如何禁用选择选项的值? (vue.js 2)

javascript - 如何让 router-view 在另一个组件内渲染组件?

javascript - 如何使用 Vue.js 下载图像而不显示它们?

javascript - v-for 取决于标签

vue.js - 我如何在vue js中的一页路由下显示不同的category._id

vue.js - 无法加载资源 : fontawesome-webfont. woff2 Laravel 5.5

vue.js - 如何将更改后的值传递给 Vue.js 中其他组件的方法?

vue.js - 如何让 Vue Router Guards 等待 Vuex?

javascript - vue + quill - 图标显示为文本(由文件加载器引起)