本文介绍了Vue.js filterBy 多字段搜索的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何通过搜索多个搜索键进行过滤?
我正在尝试这样的事情,但(当然)它不起作用:
<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 多字段搜索的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!