フィルターvue.jsチェックボックス

Question

これはvue.jsの私の最初のプロジェクトで、問題があります。 製品のフィルタを作成します。フィルタは<input type="text" v-model="search" />でのみ動作しますが、チェックボックスは機能しません。 助けてください。

は、ここであなたはより良い2つのリストを使用して検索を処理したい

<script async src="//jsfiddle.net/Lygeces4/embed/"></script>

https://jsfiddle.net/Lygeces4/

Answer 1

、私のコードです。国の一つとbrendsのための1：

data: { 
search: { countries: [], brends: [] } 
} 

次に、あなたのv-modelがで更新： <input type="checkbox" v-model="search.countries"とv-model="search.brends"。この方法では、国名はsearch.countriesで、ブレンド名はsearch.brendsになります。

最後に、あなたは（あなたがあなたのフィルターが働い望むように、または別の）フィルタ機能をこのように実装することができます。

computed: { 
    filteredItems() { 
    return this.items.filter(item => { 
     if (this.search.countries.length > 0) { 
     return this.search.countries.indexOf(item.country) > -1; 
     } 
     if (this.search.brends.length > 0) { 
     return this.search.brends.indexOf(item.brend) > -1; 
     } 
     return item; 
    }); 
    } 
}