這是我在vue.js上的第一個項目,它有一個問題。 我爲產品創建了一個過濾器。過濾器只能使用<input type="text" v-model="search" />
,但使用複選框不起作用。 請幫忙。篩選器vue.js複選框
這裏是我的代碼,
<script async src="//jsfiddle.net/Lygeces4/embed/"></script>
https://jsfiddle.net/Lygeces4/
這是我在vue.js上的第一個項目,它有一個問題。 我爲產品創建了一個過濾器。過濾器只能使用<input type="text" v-model="search" />
,但使用複選框不起作用。 請幫忙。篩選器vue.js複選框
這裏是我的代碼,
<script async src="//jsfiddle.net/Lygeces4/embed/"></script>
https://jsfiddle.net/Lygeces4/
你最好處理與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;
});
}
}
非常感謝! –
你的jsfiddle有此錯誤:'vue.min.js:6類型錯誤:此。 search.toLowerCase不是函數' – IzumiSy
我知道,所以我請求幫助 –