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