Vuejs 搜索过滤器 [英] Vuejs Search filter
本文介绍了Vuejs 搜索过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表格，其中显示了我使用以下代码获得的项目列表:
interface getResources {标题:字符串；类别:字符串；uri:字符串；图标:字符串；}@成分导出默认类用户值扩展 Vue {资源:getResources[] = [];创建(){fetch('api/Resources/GetResources').then(response => response.json() as Promise).then(数据=> {this.resources = 数据；});}}} 这是我的桌子:
<div class="panel-heading";style="font-weight:bold"><span class="glyphicon glyphicon-align-justify"></span>所有资源<div class="row"><div class="search-wrapper panel-heading col-sm-12"><输入类=表单控件"类型=文本"v-model="searchQuery"占位符=搜索"/>
<div class="panel-body";style="max-height: 400px;overflow-y: scroll;"><table v-if="resources.length";类=表"><头><tr><th>资源</th></tr></thead>
<tr v-for=资源中的项目"><td><a v-bind:href=item.uri"target=_blank">{{item.title}}</a></td></tr></tbody>我正在尝试实现一个搜索栏来过滤用户的结果，但我迷路了！
有什么建议吗?
解决方案
您可以使用 array 的 includes() 函数来搜索句子中的任意位置或短语.
new Vue({el: '#app',数据() {返回 {搜索查询:空，资源:[{title:"ABE 出席",uri:"aaaa.com",category:"a",icon:null},{title:"Accounting Services",uri:"aaaa.com",category:"a",icon:null},{title:"Administration",uri:"aaaa.com",category:"a",icon:null},{title:"Advanced Student Lookup",uri:"bbbb.com",category:"b",icon:null},{title:"Art & Sciences",uri:"bbbb.com",category:"b",icon:null},{title:"Auxiliares Services",uri:"bbbb.com",category:"b",icon:null},{title:"Basic Skills",uri:"cccc.com",category:"c",icon:null},{title:"Board of Trustees",uri:"dddd.com",category:"d",icon:null}]};},计算:{结果查询(){如果(this.searchQuery){返回 this.resources.filter((item)=>{返回 this.searchQuery.toLowerCase().split(' ').every(v => item.title.toLowerCase().includes(v))})}别的{返回 this.resources;}}}})<头><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" ><身体><div id="应用程序"><div class="panel panel-default"><div class="panel-heading"><强>所有资源</strong></div><div class="row"><div class="search-wrapper panel-heading col-sm-12"><input class="form-control" type="text" v-model="searchQuery" placeholder="Search"/><div class="table-responsive"><table v-if="resources.length" class="table"><头><tr><th>资源</th></tr></thead>
<tr v-for="结果查询中的项目"><td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td></tr></tbody></html>
基于这个答案→ Vue.js 在数组中搜索关键字
I have a table that is presenting a list of items that I got using the following code:
interface getResources {
title: string;
category: string;
uri: string;
icon: string;
}
@Component
export default class uservalues extends Vue {
resources: getResources[] = [];
created() {
fetch('api/Resources/GetResources')
.then(response => response.json() as Promise<getResources[]>)
.then(data => {
this.resources = data;
});
}
}
}
And this is my table:
<div class="panel panel-default">
<div class="panel-heading" style="font-weight:bold"><span class="glyphicon glyphicon-align-justify"></span> All Resources</div>
<div class="row">
<div class="search-wrapper panel-heading col-sm-12">
<input class="form-control" type="text" v-model="searchQuery" placeholder="Search" />
</div>
</div>
<div class="panel-body" style="max-height: 400px;overflow-y: scroll;">
<table v-if="resources.length" class="table">
<thead>
<tr>
<th>Resource</th>
</tr>
</thead>
<tbody>
<tr v-for="item in resources">
<td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to implement a Search bar that filters the results for the user but I'm lost!
Any suggestions?
解决方案
You can use the includes() function of the array to search any position in a sentence or phrase.
new Vue({
el: '#app',
data() {
return {
searchQuery: null,
resources:[
{title:"ABE Attendance",uri:"aaaa.com",category:"a",icon:null},
{title:"Accounting Services",uri:"aaaa.com",category:"a",icon:null},
{title:"Administration",uri:"aaaa.com",category:"a",icon:null},
{title:"Advanced Student Lookup",uri:"bbbb.com",category:"b",icon:null},
{title:"Art & Sciences",uri:"bbbb.com",category:"b",icon:null},
{title:"Auxiliares Services",uri:"bbbb.com",category:"b",icon:null},
{title:"Basic Skills",uri:"cccc.com",category:"c",icon:null},
{title:"Board of Trustees",uri:"dddd.com",category:"d",icon:null}
]
};
},
computed: {
resultQuery(){
if(this.searchQuery){
return this.resources.filter((item)=>{
return this.searchQuery.toLowerCase().split(' ').every(v => item.title.toLowerCase().includes(v))
})
}else{
return this.resources;
}
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
</head>
<body>
<div id="app">
<div class="panel panel-default">
<div class="panel-heading">
<strong> All Resources</strong></div>
<div class="row">
<div class="search-wrapper panel-heading col-sm-12">
<input class="form-control" type="text" v-model="searchQuery" placeholder="Search" />
</div>
</div>
<div class="table-responsive">
<table v-if="resources.length" class="table">
<thead>
<tr>
<th>Resource</th>
</tr>
</thead>
<tbody>
<tr v-for="item in resultQuery">
<td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Based on this answer → Vue.js search keyword in array
这篇关于Vuejs 搜索过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆