Vuejs搜索过滤器 [英] Vuejs Search filter
问题描述
我是Vue.js的新手，所以感谢您的帮助!!
I'm new to Vue.js, so thanks for the help!!
我有一张表格，其中列出了我使用的项目清单以下代码：
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;
});
}
}
这是我的表
<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>
我正在尝试实现一个搜索栏，用于过滤用户的结果，但我迷路了！
I'm trying to implement a Search bar that filters the results for the user but I'm lost!
有任何建议吗？
推荐答案
你可以在这种情况下使用计算属性，所以，我创建了一个名为 filteredResources 将在 v-for 循环中使用，我曾使用虚拟数据，但你可以保留你的 resources 声明为空并调用promise函数将其填入 created hook，检查代码如果您更喜欢单个文件组件或以下代码通过CDN使用Vue
You could use computed property for this case, so, i created one called filteredResources which will be used in v-for loop, i had used dummy data, but you could keep your resources declared empty and call a promise function to fill it in created hook, check this code if your are preferring single file component or the following code of you're using Vue via CDN
new Vue({
el: '#app',
data() {
return {
searchQuery:'',
resources:[
{title:"aaa",uri:"aaaa.com",category:"a",icon:null},
{title:"add",uri:"aaaa.com",category:"a",icon:null},
{title:"aff",uri:"aaaa.com",category:"a",icon:null},
{title:"bbb",uri:"bbbb.com",category:"b",icon:null},
{title:"bdd",uri:"bbbb.com",category:"b",icon:null},
{title:"bsb",uri:"bbbb.com",category:"b",icon:null},
{title:"ccc",uri:"cccc.com",category:"c",icon:null},
{title:"ddd",uri:"dddd.com",category:"d",icon:null}
]
};
},
computed: {
filteredResources (){
if(this.searchQuery){
return this.resources.filter((item)=>{
return item.title.startsWith(this.searchQuery);
})
}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" 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 filteredResources">
<td><a v-bind:href="item.uri" target="_blank">{{item.title}}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
这篇关于Vuejs搜索过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
