Vue - фильтр товаров через input checkbox?

Question

Как сделать показ товаров (фильтрация товаров)

В фильтрах выбор категорий - отображения категорий по выбранному checkbox

data() {
        return {
                        cat: null,
                        cat2: null,
                        products: [
                                {id: 1, category: 1, brand: 1},
                                {id: 2, category: 1, brand: 1},
                                {id: 5, category: 1, brand: 1},
                                {id: 3, category: 2, brand: 1},
                                {id: 4, category: 3, brand: 2},
                        ]
                }
    }


<input type="checkbox" id="jack" value="Джек" v-model="cat">
<label for="jack">Category 1</label>
<input type="checkbox" id="john" value="Джон" v-model="cat2">
<label for="john">Category 2</label>
    
<div v-for="product in products" style="border: 1px solid red; width: 100px;">
    <div>ID {{product.id}}</div>
    <div>Category {{product.category}}</div>
    <div>Brand {{product.brand}}</div>
</div>

Answer 1

Можно реализовать фильтрацию массива данных по категориям, используя вычислительное свойство из computed, например:

...
 computed: {
  filterData() {
    let data = []
    // если есть выбранные чекбоксы
    if (this.categories.length) {
      // фильтруем данные
      data = this.products.filter(x => this.categories.indexOf(x.category.toString()) != -1)
    } else {
      // иначе отдаем все данные из массива
      data = this.products
    }
    return data
  },
},
...

и рабочий пример:

new Vue({
  el: '#app',
  data() {
    return {
      categories: [],
      products: [{
          id: 1,
          category: 1,
          brand: 1
        },
        {
          id: 2,
          category: 1,
          brand: 1
        },
        {
          id: 5,
          category: 1,
          brand: 1
        },
        {
          id: 3,
          category: 2,
          brand: 1
        },
        {
          id: 4,
          category: 3,
          brand: 2
        },
      ]
    }
  },
  computed: {
    filterData() {
      let data = []
      // если есть выбранные чекбоксы
      if (this.categories.length) {
        // фильтруем данные
        data = this.products.filter(x => this.categories.indexOf(x.category.toString()) != -1)
      } else {
        // иначе отдаем все данные из массива
        data = this.products
      }
      return data
    },
  },
})

.flex {
  display: flex;
}

.flex>div {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="checkbox" id="check1" value="1" v-model="categories">
  <label for="check1">Category 1</label>
  <input type="checkbox" id="check2" value="2" v-model="categories">
  <label for="check2">Category 2</label>
  <input type="checkbox" id="check3" value="3" v-model="categories">
  <label for="check3">Category 3</label>
  <hr>
  <div v-for="product in filterData" class="flex">
    <div>ID {{product.id}}</div>
    <div>Category {{product.category}}</div>
    <div>Brand {{product.brand}}</div>
  </div>
</div>

БЛОГ НА HUSL

Vue - фильтр товаров через input checkbox?

Ответы (1 шт):