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

我有一个来自数组的用户列表。我想根据顶部的搜索框（名称）过滤它们。我看到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:'[email protected] /cdn-cgi/l/email-protection', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+916466004566', unread:'0' }
        ]
      }
    }
</script>

我通过将我的属性“数组”与数据元素和计算属性（以及数组）与过滤后的元素来完成此操作。 HTML 呈现过滤后的元素。我有一个绑定到文本框的属性。 为了简单起见，像这样：

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected] /cdn-cgi/l/email-protection', 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，我将这两个值都小写以使其不区分大小写。

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

编辑：在计算属性中添加了小提琴和代码更正