我有一个数组用户列表。我想根据顶部的搜索框(名称)过滤它们。我看到VueJS 1中有过滤器。但是VuesJS 2中没有过滤器。如何在VueJS 2中实现这一点
<input type="text" v-model="search"/>
<div class="row profile" v-for="customer in customers">
<div class="col-md-offset-1 col-md-3"><img :src="customer.profile_pic" class="profile-pic" /></div>
<div class="col-md-8"><h4 class="name">{{customer.name}}</h4></div>
</div>
<script>
data: function () {
return{
search: '',
customers: [
{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
]
}
}
</script>
答案 0 :(得分:22)
我通过将我的属性“array”与数据元素和带有过滤元素的计算属性(数组)一起完成此操作。 HTML呈现已过滤的元素。我有一个绑定到文本框的属性。 为简单起见,这样的事情:
data: function () {
return{
search: '',
customers: [
{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
]
},
computed:
{
filteredCustomers:function()
{
var self=this;
return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
}
}
将HTML绑定到filteredCustomers。您现在应该根据您在搜索上键入的内容来设置反应式HTML。这个“过滤器”方法是数组的原生JavaScript,我将两个值都设置为低位,使其不区分大小写。
这是一个小提琴的工作示例: https://jsfiddle.net/dkmmhf5y/1/
编辑:在计算属性中添加了小提琴和代码更正
答案 1 :(得分:6)
过滤器在vuejs 2中已经removed。正如@ azamat-sharapov建议的那样,您可以使用以下3种方法之一来重复使用过滤器:
我怎样才能在2.0中完成?
- 密新
- 使用方法
分隔模块- 具有计算道具功能的独立模块
vuejs 2中过滤器的简单实现可以使用计算属性,该属性可以调用方法来获取过滤列表。在方法中,您可以传递列表,查询,它可以返回filtered列表。请参阅以下代码和工作演示here。以下是通用函数,可以移动到mixin或模块,并可以在多个组件中重复使用。
var vm = new Vue({
el: '#demo',
data: {
customers: [
{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
],
columns: {
id : {
displayname : "id",
sortorder : 1
},
name : {
displayname : "name",
sortorder : 1
},
email : {
displayname : "email",
sortorder : 1
}
},
query: '',
},
computed: {
tableFilter: function () {
return this.findBy(this.customers, this.query, 'name')
}
},
methods: {
findBy: function (list, value, column) {
return list.filter(function (item) {
return item[column].includes(value)
})
}
}
})
答案 2 :(得分:1)
此方法对我有用
computed: {
filteredList() {
return this.postList.filter(post => {
var vm = this;
return post.title.toLowerCase().includes(vm.search.toLowerCase())
})
}
}
答案 3 :(得分:0)
<!-- Searching Bar Start -->
<div class="form-group mb-2">
<span style="float:left; margin:0 10px; padding-top:5px; color:black;">Search:</span>
<input v-model="search" class="form-control" placeholder="Filter users by Queue" style="width:30%;">
</div>
<!-- Searching Bar End -->
<td style="width:25%;cursor:pointer;color: blue;" class="tablecolthree" @click="sortbytotal('pending_duration_day')">Pedning Duration <i class="fa fa-sort" aria-hidden="true"></i></td>
return {
search:'',
dupsearch:'',
currentSort:'pending_duration_day',
currentSortDir:'asc',
}
methods: {
sortbytotal:function(s) {
this.dupsearch='sort';
this.search='';
if(s === this.currentSort) {
this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
}
this.currentSort = s;
},
date(e){
if(this.stdate){
var fromdate = [];
this.loading = true;
fromdate.push(moment(this.stdate).format('YYYY-MM-DD'));
this.showstart = moment(this.stdate).format('MMM DD, YYYY');
axios.get('/open-ticket-detail?date='+fromdate).then(response => {
this.openticketdetail = response.data;
this.loading = false;
//console.log(this.openticket);
})
}
e.preventDefault();
}
},
computed:{
sortedCats:function()
{
var self=this;
if(self.search!=''){
this.dupsearch='';
}
if(this.dupsearch=='sort'){
return this.openticketdetail.open_tickets.sort((a,b) => {
let modifier = 1;
if(this.currentSortDir === 'asc') modifier = -1;
if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
return 0;
});
}
return this.openticketdetail.open_tickets.filter(function(openticket){return openticket.queue_name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
},
},
答案 4 :(得分:0)
我喜欢内森(Nathan)的回答,但我认为这样做会更好,并且不需要进行var self = this
分配。当寻找存在时,Vue eslint插件在使用indexOf
时会皱眉,这也会使eslint高兴。在这里:
data: function () {
return{
search: '',
customers: [
{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
]
},
computed:
{
filteredCustomers () {
return this.customers.filter((customer) => {
return customer.name.toLowerCase().includes(this.search.toLowerCase())
})
}
}
答案 5 :(得分:-1)
`computed: {
filteredResources(){
return this.Surveyors.filter((surveyor)=>{
return surveyor.Name.toLowerCase().match(this.searchQuery.toLowerCase());
})
}
}`
/ Surveyors是数据表名称,Surveyor是它的索引,就像在您的示例中您在客户中拥有客户一样 /