vuejs color filter with checkbox

Keerthi

Hi,

Can any one help me how to filter the certain products based on whether checkbox is clicked or not with vue.js and how to link up color filter to our products, actually I have created sample vuejs color filter with checkbox. Please find below is the code that need to paste in packages/Webkul/Shop/src/Resources/views/products/list/layered-navigation.blade.php

Before @push('scripts')

<div class="layered-wrapper">
<layered></layered>
</div>

Paste below code In @push('scripts') of the same file

<script type="text/x-template" id="layered-template">
        <div>

        <div v-for="cat in categoryList">
          <input type="checkbox" :id="cat" :value="cat" v-model="categories">
          <label :for="cat">@{{ cat }}</label>
          
        </div>
        <br>
        <span>You have chosen:  categories </span>

        <ul>
          <li v-for="item in selectedItems"> category: @{{item.category}} | name: @{{item.name}}</li>
        </ul>
        </div>
    </script>
    <script>
Vue.component('layered', {

template: '#layered-template',

name: 'Checkbox',
    data() {
      return {
        categoryList: ['animal', 'fruit', 'clothes'],
        categories: [],
        items: [
          { id: '1', name: 'apple', description: 'description about product', category: 'fruit', },
          { id: '2', name: 'mango', description: 'description about product', category: 'fruit', },
          { id: '3', name: 'shoes', description: 'description about product', category: 'footwear', },
          { id: '4', name: 'shirt', description: 'description about product', category: 'clothes', },
          { id: '5', name: 'dog', description: 'description about product', category: 'animal', },
          { id: '6', name: 'cat', description: 'description about product', category: 'animal', },
        ],
      };
    },
    computed: {
      selectedItems: function () {
        return this.items.filter(function (item) {
          return this.categories.includes(item.category);
        }, this);
      },
    },


});
</script>

I want this kind of output when we click on checkbox, please can anyone help me how to get this dynamic with the our products, actually I don't know vue.js.