2017-10-17 262 views
0

這是我在vue.js上的第一個項目,它有一個問題。 我爲產品創建了一個過濾器。過濾器只能使用<input type="text" v-model="search" />,但使用複選框不起作用。 請幫忙。篩選器vue.js複選框

這裏是我的代碼,

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

https://jsfiddle.net/Lygeces4/

+0

你的jsfiddle有此錯誤:'vue.min.js:6類型錯誤:此。 search.toLowerCase不是函數' – IzumiSy

+0

我知道,所以我請求幫助 –

回答

0

你最好處理與2所列出搜索。一個國家,一個用於brends:

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; 
    }); 
    } 
} 
+0

非常感謝! –