在文本框 VueJS 2 中键入时搜索列表

Question

我有一个数组中的用户列表。我想根据顶部的搜索框（名称）过滤它们。我看到 VueJS 1 中有过滤器。但在 VueJS 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>

Answer 1

过滤器已在 vuejs 2 中 removed。正如@azamat-sharapov 所建议的，您可以使用以下 3 种方式之一获得可重复使用的过滤器：

How can I do it in 2.0?

Mixin

Separate module with method

Separate module with computed prop function

vuejs 2 中过滤器的一个简单实现可以使用计算的属性，它可以调用一个方法来获取过滤列表。在该方法中，您可以传递列表、查询并且它可以 return filtered list. see following code and working demo here。以下是泛型函数，可以移到mixin或module中，可以re-used在多个组件中。

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)
      })
    }
  }
})

Answer 2

我是通过让我的属性 "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 。 "filter" 方法是数组的本机 JavaScript，我 lower-cased 两个值使其不区分大小写。

这是 fiddle 中的一个工作示例： https://jsfiddle.net/dkmmhf5y/1/

编辑：在计算属性

中添加了 fiddle 和代码更正

Answer 3

这个方法对我很有效

computed: {
   filteredList() {
     return this.postList.filter(post => {
       var vm = this;
       return post.title.toLowerCase().includes(vm.search.toLowerCase())
     })
   }
}

Answer 4

        <!-- 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;});
        },
    },

Answer 5

`computed: {
    filteredResources(){
         return this.Surveyors.filter((surveyor)=>{
         return surveyor.Name.toLowerCase().match(this.searchQuery.toLowerCase());  
         })
      }
    }`

/Surveyors 是数据 table name 和 surveyors 是它的索引，就像在你的例子中你有 customer in customers/

Answer 6

我喜欢 Nathan 的回答，但我认为这会更好，并且它消除了 var self = this 分配的需要。它还将使 eslint 高兴，因为 Vue eslint 插件在寻找存在时不喜欢使用 indexOf 。这是：

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())
      })
    }
}

在文本框 VueJS 2 中键入时搜索列表

Search a list while typing in textbox VueJS 2

vue.js

vuejs2