[英]Filter vue.js checkbox
It's my first project on vue.js and a have a problem. 这是我在vue.js上的第一个项目,并且有问题。 I create a filter for products. 我为产品创建了一个过滤器。 Filter work only with <input type="text" v-model="search" />
, but with checkbox don't work. 过滤器仅适用于<input type="text" v-model="search" />
,但不适用于复选框。 Please help. 请帮忙。
Here's my code, 这是我的代码,
<script async src="//jsfiddle.net/Lygeces4/embed/"></script>
https://jsfiddle.net/Lygeces4/ https://jsfiddle.net/Lygeces4/
You'd better handle your search with 2 lists. 您最好使用2个列表来进行搜索。 One for countries and one for brends: 一种用于国家,另一种用于国家:
data: {
search: { countries: [], brends: [] }
}
Then, update your v-model
with : <input type="checkbox" v-model="search.countries"
and v-model="search.brends"
. 然后,使用以下命令更新您的v-model
: <input type="checkbox" v-model="search.countries"
和v-model="search.brends"
。 This way, you'll have country names in search.countries
and brend name in search.brends
. 这样,您将在search.countries
具有国家/地区名称,在search.brends中search.brends
brend名称。
Finally, you can implement the filter function this way (or another, as you wish your filters worked): 最后,您可以通过这种方式(或您希望过滤器正常运行的另一种方式)实现过滤器功能:
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;
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.