web-dev-qa-db-fra.com

Rechercher dans une liste en tapant dans la zone de texte VueJS 2

J'ai une liste d'utilisateurs d'un tableau. Et je veux les filtrer en fonction de la zone de recherche (nom) en haut. J'ai vu qu'il y avait des filtres dans VueJS 1. Mais non disponible dans VuesJS 2. Comment y parvenir dans 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]', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+916466004566', unread:'0' }
        ]
      }
    }
</script>
vuejs2vue.js
5
Gijo Varghese

J'ai fait cela en ayant ma propriété "array" avec les éléments de données et une propriété calculée (également avec array) avec les éléments filtrés . Le HTML rend les éléments filtrés. J'ai une propriété liée à la zone de texte . Pour simplifier, quelque chose comme ceci:

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', 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;});
    }
}

Liez votre code HTML aux clients filtrés. Vous devriez maintenant avoir un code HTML réactif basé sur ce que vous tapez lors de la recherche. Cette méthode "filter" est un code JavaScript natif pour les tableaux. J'ai mis les deux valeurs en majuscule pour le rendre insensible à la casse.

Voici un exemple de travail dans Fiddle: https://jsfiddle.net/dkmmhf5y/1/

Edit: Ajout de corrections de violon et de code dans la propriété calculée

21
Nelson Rodriguez

Les filtres ont été supprimés in vuejs 2. Comme suggéré par @ azamat-sharapov, vous pouvez utiliser des filtres réutilisables de l'une des trois manières suivantes:

Comment puis-je le faire en 2.0?

  • Mixin
  • Module séparé avec méthode 
  • Module séparé avec fonction prop calculée

Une implémentation simple de filter dans vuejs 2 peut utiliser une propriété calculée qui peut appeler une méthode pour obtenir une liste filtrée. dans la méthode, vous pouvez transmettre liste, requête et il peut renvoyer la liste filtrée . voir le code suivant et la démo de travail ici . Vous trouverez ci-dessous des fonctions génériques, qui peuvent être déplacées vers mixin ou module et peuvent être réutilisées dans plusieurs composants.

var vm = new Vue({
  el: '#demo',
  data: {
    customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'[email protected]', 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)
      })
    }
  }
})
6
Saurabh

Cette méthode a bien fonctionné pour moi 

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