在文本框 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:'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>

原文由 Gijo Varghese 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 265
2 个回答

我通过让我的属性“数组”与数据元素以及计算属性(以及数组)与过滤元素来完成此操作。 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 绑定到过滤的客户。您现在应该有一个基于您在搜索中键入的内容的响应式 HTML。该“过滤器”方法是用于数组的原生 JavaScript,我将两个值都小写以使其不区分大小写。

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

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

原文由 Nelson Rodriguez 发布,翻译遵循 CC BY-SA 4.0 许可协议

过滤器已在 vuejs 2 中 删除。正如@azamat-sharapov 所建议的,您可以使用以下 3 种方式之一来拥有可重用的过滤器:

如何在 2.0 中做到这一点?

  • 米信
  • 用方法分离模块
  • 具有计算道具功能的独立模块

vuejs 2 中过滤器的简单实现可以使用计算属性,该属性可以调用方法来获取过滤列表。在该方法中,您可以传递列表、查询,它可以返回 过滤 后的列表。 在此处 查看以下代码和工作演示。以下是通用函数,可以移动到 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)
      })
    }
  }
})

原文由 Saurabh 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题