過濾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中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;
    });
  }
}