[英]Vuejs Search filter
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;
});
}
}
}
You can use the includes()
function of the array
to search any position in a sentence or phrase.您可以使用array
的includes()
函数来搜索句子或短语中的任何位置。
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基于此答案→ Vue.js 在数组中搜索关键字
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您可以使用computed
属性对于这种情况,所以,我创建了一个名为filteredResources
将在使用v-for
循环,我用了假数据,但你可以让你的resources
宣布为空并调用一个承诺函数来填充它的created
钩子,如果您更喜欢单文件组件或您通过 CDN 使用 Vue 的以下代码,请检查此代码
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>
Here is Vue 3 version of a simple search.这是一个简单搜索的 Vue 3 版本。
const { createApp, ref } = Vue const App = { setup() { let searchText = ref('') const list = [ 'orange', 'red', 'blue', 'black', 'white' ] function filteredList() { return list.filter(data => data.toLowerCase().includes(searchText.value.toLowerCase())) } return {searchText, filteredList} } } Vue.createApp(App).mount('#app')
<script src="https://unpkg.com/vue@next"></script> <div id="app"> <input type="text" v-model="searchText"> <ul> <li v-for="data in filteredList()" :key="data"> {{ data }} </li> </ul> </div>
THIS NAVBAR COMPONENTS此导航栏组件
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-info display-6">
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex">
<input v-model="search" class="form-control me-2" id="inputGroup-sizing-lg" placeholder="Search...">
</form>
</div>
</div>
</nav>
</template>
<script>
import {mapActions} from "vuex"
export default{
data(){
return{
search: ""
}
},
watch:{
search(newsearch) {
this.filteredProducts(newsearch)
}
},
methods:{
...mapActions([
"filteredProducts"
])
}
}
</script>
THIS STORE.JS这个商店.JS
const store = createStore({
state: {
productsList: products,
cartList: [],
filtered: []
},
mutations:{
filteredProducts(state, item) {
if(item){
state.filtered = products.filter((product) => product.Title.toUpperCase().includes(item.toUpperCase()))
console.log(state.filtered);
}
if(state.filtered){
console.log("state.filtered.lenght", state.filtered.lenght);
state.productsList = [...state.filtered]
}
}
},
actions:{
filteredProducts (context, item){
context.commit('filteredProducts', item)
}
}
});
I found easy way...using "@input function".. It's work for me!我找到了简单的方法……使用“@input 函数”……这对我有用!
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},
]
};
},
methods: {
getTextSearch: function(textSearch) {
this.filteredResources= this.resources
this.filteredResources= this.filteredResources.filter(item => {
return item.uri.toLowerCase().includes(textSearch);
});
},
}
})
Here html:这里html:
<!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" @input="getTextSearch($event)" type="text" 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.