javascript - Lista de filtros con Vue.js

Question

Simplemente comencé con Vue.js y esto es lo que estoy haciendo: estoy presentando una lista de productos, y cada producto tiene un nombre, un género y un tamaño. Me gustaría que los usuarios puedan filtrar los productos por género, utilizando una entrada para escribir el género.

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

Logré actualizar el género, pero tengo un problema con la parte de filtrado. Cuando se carga la página, no quiero ningún filtro. En la documentación, aconsejan usar v-if pero no parece compatible con esta configuración.

Si uso v-if , podría hacer:

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

Pero nuevamente, esto no funciona cuando la página se carga porque el género está vacío. No pude encontrar una solución para esto.

¿Cómo debería abordar este problema?

Answer 1

Lo primero: use algo como esto: http://011.vuejs.org/api/filters.html#filterBy

Lo segundo: escribir un si el género está vacío / indefinido, devolver todo

Answer 2

Puedes probar v-if="!gender || product.gender == gender"

Answer 3

Utilice propiedades calculadas, algo como esto (Ejemplo de elementos de filtro por tipo)

const app = new Vue({

  el: ''#app'',

  data: {
     search: '''',
     items: [
       {name: '''', 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
      })
    }
  }

})

Modelo:

  <div id="app">

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

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

  </div>

Demostración: http://jsbin.com/dezokiwowu/edit?html,js,console,output