过滤 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 个列表来处理搜索。一个用于国家，一个用于布伦德：

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

然后，使用以下命令更新您的v-model： <input type="checkbox" v-model="search.countries"和v-model="search.brends" .这样，您将在search.countries中拥有国家/地区名称，在search.brends中拥有brend名称。

最后，您可以通过这种方式实现过滤器函数（或者您希望过滤器工作的其他方式）：

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