如何在 Vue.js 2 中搜索多个字段 [英] How do I search through multiple fields in Vue.js 2
问题描述
我正在尝试在我的 Vue.js 2 应用程序中搜索或过滤 3 个字段 firstname、lastname 和 email.我知道 Vue 2 没有与 Vue 1 不同的内置过滤器方法，因此我创建了一个只能过滤一个字段的自定义方法.如何将其扩展到多个领域?我尝试过类似这样的 filterBy(list, value1, value2, value3) 但它不起作用.
这是我的代码
<div class="客户容器"><input class="form-control" placeholder="输入姓氏" v-模型=过滤器输入"><br/><table class="table table-striped"><头><tr><th>名字</th><th>Last Name</th><th>电子邮件</th><th></th></tr></thead><tr v-for="customer in filterBy(customers, filterInput)"><td>{{customer.first_name}}</td><td>{{customer.last_name}}</td><td>{{customer.email}}</td><td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">查看</router-link></td></tr></tbody></模板><脚本>导出默认{name: '客户',数据 () {返回 {顾客: []，过滤器输入:'',}},方法: {fetchCustomers(){this.$http.get('http://slimapp.dev/api/customers').then(功能(响应){this.customers = (response.body);});},过滤器(列表，值){value = value.charAt(0).toUpperCase() + value.slice(1);返回 list.filter(function(customer){返回 customer.last_name.indexOf(value) >-1;});},},创建:函数(){如果(this.$route.params.alert){this.alert = $route.params.alert}this.fetchCustomers();},更新:函数(){this.fetchCustomers();},成分: {}}<!-- 添加scoped"属性以将 CSS 限制为仅适用于该组件 --><样式范围>
解决方案 扩展你的 filterBy 方法来检查更多而不只是 last_name
filterBy(list, value){value = value.charAt(0).toUpperCase() + value.slice(1);返回 list.filter(function(customer){返回 customer.first_name.indexOf(value) >-1 ||customer.last_name.indexOf(value) >-1 ||customer.email.indexOf(value) >-1});},
但是您可以使用计算来提供过滤结果(它可能会表现得更好，因为它会缓存计算)
计算:{过滤列表(){const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);返回 this.customers.filter(function(customer){返回 customer.first_name.indexOf(value) >-1 ||customer.last_name.indexOf(value) >-1 ||customer.email.indexOf(value) >-1})}}
并在您的模板中使用它
...</tr>I am trying to search or filter through 3 fields firstname, lastname and email in my Vue.js 2 application. I understand that Vue 2 does not come with a built in filter method unlike in Vue 1, hence I created a custom method which is only able to filter through just one field. How do I extend this to multiple fields? I have tried something like this filterBy(list, value1, value2, value3) but it does not work.
This is my code
<template>
<div class="customers container">
<input class="form-control" placeholder="Enter Last Name" v-
model="filterInput">
<br />
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in filterBy(customers, filterInput)">
<td>{{customer.first_name}}</td>
<td>{{customer.last_name}}</td>
<td>{{customer.email}}</td>
<td><router-link class="btn btn-default" v-bind:to="'/customer/'+customer.id">View</router-link></td></tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'customers',
data () {
return {
customers: [],
filterInput:'',
}
},
methods: {
fetchCustomers(){
this.$http.get('http://slimapp.dev/api/customers')
.then(function(response){
this.customers = (response.body);
});
},
filterBy(list, value){
value = value.charAt(0).toUpperCase() + value.slice(1);
return list.filter(function(customer){
return customer.last_name.indexOf(value) > -1;
});
},
},
created: function(){
if (this.$route.params.alert) {
this.alert = $route.params.alert
}
this.fetchCustomers();
},
updated: function(){
this.fetchCustomers();
},
components: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
解决方案 Extend your filterBy method to check more then just last_name
filterBy(list, value){
value = value.charAt(0).toUpperCase() + value.slice(1);
return list.filter(function(customer){
return customer.first_name.indexOf(value) > -1 ||
customer.last_name.indexOf(value) > -1 ||
customer.email.indexOf(value) > -1
});
},
But you can use computed to provide filtered results (it might perform better because it caches computations)
computed: {
filteredList() {
const value= this.filterInput.charAt(0).toUpperCase() + this.filterInput.slice(1);
return this.customers.filter(function(customer){
return customer.first_name.indexOf(value) > -1 ||
customer.last_name.indexOf(value) > -1 ||
customer.email.indexOf(value) > -1
})
}
}
and use it in your template
<tr v-for="customer in filteredList">
...
</tr>
这篇关于如何在 Vue.js 2 中搜索多个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆