在文本框 VueJS 2 中键入时搜索列表 [英] Search a list while typing in textbox VueJS 2

问题描述

我有一个数组中的用户列表.我想根据顶部的搜索框(名称)过滤它们.我看到VueJS 1中有过滤器.但在VuesJS 2中不可用.如何在VueJS 2中实现这一点

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

<脚本>数据:函数(){返回{搜索: ''，顾客: [{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' }]}}

解决方案

我已经做到了这一点，我的属性数组"包含数据元素，计算属性(也包含数组)包含过滤元素.HTML 呈现过滤后的元素.我有一个绑定到文本框的属性.为简单起见，如下所示:

数据:函数(){返回{搜索: ''，顾客: [{ id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' },{ id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', 未读:'0' }]},计算:{过滤的客户:功能(){var self=this;return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});}}

将您的 HTML 绑定到已过滤的客户.您现在应该拥有一个基于您在搜索中输入的内容的响应式 HTML.过滤器"方法是用于数组的原生 JavaScript，我将两个值都小写以使其不区分大小写.

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

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

I have a list of users from an array. And I want to filter them based on the search box(name) at the top. I saw that there are filters in VueJS 1. But not available in VuesJS 2. How can achieve this in 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:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' }
        ]
      }
    }
</script>

解决方案

I have done this by having my property "array" with the data elements and a computed property (array as well) with the filtered elements. The HTML renders the filtered elements. I have a property bound to the text box. For simplicity, something like this:

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[e-mail]', phone:'[phone]', unread:'0' }
        ]
},
computed:
{
    filteredCustomers:function()
    {
        var self=this;
        return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
    }
}

Bind your HTML to filteredCustomers. You should now have a reactive HTML based on what you type on search. That "filter" method is native JavaScript for arrays, I lower-cased both values to make it case insensitive.

Here's a working example in fiddle: https://jsfiddle.net/dkmmhf5y/1/

Edit: Added fiddle and code corrections in computed property

这篇关于在文本框 VueJS 2 中键入时搜索列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！