web-dev-qa-db-fra.com

Filtrer la liste avec Vue.js

Je viens juste de commencer à utiliser Vue.js et voici ce que je fais: je présente une liste de produits et chaque produit a un name, un gender et un size. Je souhaite que les utilisateurs puissent filtrer les produits par genre, en utilisant une entrée pour taper le genre.

var vm = new Vue({
      el: '#product_index',
      data: {
        gender: "",
        products: [{name: "jean1", gender: "women", size: "S"}, {name: "jean2", gender: "men", size: "S"}]
      },
      methods:{
        updateGender: function(event){
          this.gender = $(event.target).val()
        }
      }
    }
  )

  <div v-for="product in products" v-if="...">
    <p>{{product.name}}<p>
  </div>
  <input v-on:change="updateGender">

J'ai réussi à mettre à jour le genre, mais j'ai un problème avec la partie filtrage. Lorsque la page se charge, je ne veux plus de filtrage. Dans la documentation, ils conseillent d'utiliser v-if mais cela ne semble pas compatible avec cette configuration.

Si j'utilise v-if, Je pourrais faire:

v-if="product.gender == gender"

Mais encore une fois, cela ne fonctionne pas lorsque la page est chargée car le genre est vide. Je ne pouvais pas trouver une solution de contournement pour cela.

Comment dois-je aborder ce problème?

javascriptvue.js
26
Graham Slick

Utiliser les propriétés calculées - quelque chose comme ceci (Exemple: les éléments de filtre ci-dessous filtrés par type)

const app = new Vue({

  el: '#app',

  data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development'},
       {name: 'Game of Thrones', type: 'serie'},
       {name: 'Jon Snow', type: 'actor'}
     ]
  },

  computed: {
    filteredItems() {
      return this.items.filter(item => {
         return item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    }
  }

})

Modèle:

  <div id="app">

    <div v-for="item in filteredItems" >
      <p>{{item.name}}</p>
    </div>

    <input type="text" v-model="search">

  </div>

Démo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

61
Belmin Bedak

Tu peux essayer v-if="!gender || product.gender == gender"

4
Nora
computed: {
        filteredItems() {
          return this.allStartupData.filter(item => {
            let byName =
              item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
            let byDescription =
              item.description.toLowerCase().indexOf(this.search.toLowerCase()) >
              -1;
            if (byName === true) {
              return byName;
            } else if (byDescription === true) {
              return byDescription;
            }
          });
        }
      }

et alors vous pouvez parcourir les éléments filtrés comme par exemple

 <v-flex v-for="(obj,index) in filteredItems" :key="index" xs12 md4>
0
Bakhtawar GIll