Lista filtrów z Vue.js

Question

Po prostu zaczynam od Vue.js i oto, co robię: renderuję listę produktów, a każdy produkt ma nazwę, płeć i rozmiar. Chciałbym, aby użytkownicy mogli filtrować produkty według płci, używając danych wejściowych do wpisania płci.

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

Udało mi się zaktualizować płeć, ale mam problem z częścią filtrującą. Po załadowaniu strony nie chcę żadnego filtrowania. W dokumentacji radzą używać v-if, ale nie wydaje się to zgodne z tą konfiguracją.

Jeśli używam v-if mogłem zrobić:

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

Ale znowu, to nie działa, gdy strona załadowała ponieważ płeć jest pusty. Nie można znaleźć obejścia tego problemu.

Jak powinienem podchodzić do tego problemu?

Answer 1

Zastosowanie obliczone właściwości - coś takiego (przykład mieszkowe elementów filtracyjnych wg rodzaju)

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 
     }) 
    } 
    } 

}) 

Szablon:

<div id="app"> 

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

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

    </div> 

Demo: http://jsbin.com/dezokiwowu/edit?html,js,console,output

Answer 2

Pierwsza sprawa: używać coś takiego: http://011.vuejs.org/api/filters.html#filterBy

Druga rzecz: wr ite if płci jest pusty/niezdefiniowany, powrót wszystko

Answer 3

Można spróbować v-if="!gender || product.gender == gender"