筛选器vue.js复选框

Question

这是我在vue.js上的第一个项目，它有一个问题。 我为产品创建了一个过滤器。过滤器只能使用<input type="text" v-model="search" />，但使用复选框不起作用。 请帮忙。

这里是我的代码，

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

https://jsfiddle.net/Lygeces4/

Answer 1

你最好处理与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; 
    }); 
    } 
}