title: Product Filter using Vue.js
body: <p>I want to make a product filter using vue.js that can filter based on the lowest price or highest price, color and product type. actually I want to make product filter like this: <a href="https://i.stack.imgur.com/zsn4b.png" rel="nofollow noreferrer">IMAGE PRODUCT FILTER HERE</a></p>
  
  <p>I got the idea to make a filter product like this from here: <a href="https://www.hm.com/id/products/men/shorts" rel="nofollow noreferrer">link </a>  </p>
  
  <p><strong>My Products Data :</strong> </p>
  
  <blockquote>
    <p>Array(5) 0:base_color:"000000"category:"T-SHIRT" id:3
    image:"ss18-1_000000_r11xw_crafted-pride-navy-ss18-2.jpg"
    name:"ChatimeMidnight Sale December 2017" price:123
    product_code:"ss18-1" product_color_id:3 status:1 stock:"2"
    weight:123123</p>
  </blockquote>
  
  <p><strong>Vue.js Code</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        const product_list = new Vue({
          el:"#product-list",
          data:{
            filterBox:false,
            dataFilter:{
              soryBy:"",
              base_color:[],
              category:[]
            },
             isActive: false,
             products:{!! $products-&gt;toJson() !!},
             productcolors:{!!$productcolors-&gt;toJson()!!},
             categories:{!!$categories-&gt;toJson()!!},
             inputSearch:'',
          },
          mounted(){
            console.log(this.products);
          },
          computed:{
            filteredProduct:function(){
              //I DONT KNOW HOW TO USE OBJECT FOR FILTERING
            }
          },
          methods:{
            filterbtn()
            {
              if (this.filterBox == false) {
                  this.filterBox = true;
              }else {
                this.filterBox = false;
              }
  
            },
            sortBy:function(e){
              this.dataFilter.soryBy = e.target.value;
  
            },
            colorFilter:function(e){
              let data = e.target.getAttribute('data-attr');
              this.dataFilter.base_color.push(data);
  
            },
            productTypeFilter:function(e){
              let data = e.target.getAttribute('data-attr');
              this.dataFilter.category.push(data);
            },
            deleteProduct:function(product_id,product_color_id){
              axios.delete('/admin/product/delete/'+product_id+'/'+product_color_id);
            },
  
  
          },
  
  
        });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="product-filter-content" v-if="filterBox != false"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-4"&gt;
                &lt;div class="product-filter-sortby"&gt;
  
                    &lt;ul&gt;
                      &lt;h4&gt;Sort By&lt;/h4&gt;
                      &lt;li&gt;&lt;label for="highest" &gt;Highest Price
                            &lt;input type="checkbox" name="" id="highest" v-on:click="sortBy"   value="highest"&gt;
                          &lt;/label&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;label for="lowest" &gt;Lowest Price
                                &lt;input type="checkbox" name="" id="lowest" v-on:click="sortBy"   value="lowest"&gt;
                              &lt;/label&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;label for="newest" &gt;Newest Product
                                    &lt;input type="checkbox" name="" id="newest" v-on:click="sortBy"   value="newest"&gt;
                                  &lt;/label&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;label for="oldest" &gt;Oldest Product
                                        &lt;input type="checkbox" name="" id="oldest" v-on:click="sortBy"   value="oldest"&gt;
                                      &lt;/label&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4"&gt;
                &lt;div class="product-filter-color"&gt;
  
                    &lt;ul&gt;
                      &lt;h4&gt;Color&lt;/h4&gt;
                      &lt;li v-for="productcolor in productcolors"&gt;
                        &lt;div class="product-color-filter-div" v-bind:data-attr="productcolor.base_color" v-on:click="colorFilter" v-bind:style="{backgroundColor:'#'+productcolor.base_color}"&gt;
  
                        &lt;/div&gt;
                      &lt;/li&gt;
  
                    &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4"&gt;
                &lt;div class="product-filter-color"&gt;
  
                    &lt;ul&gt;
                      &lt;h4&gt;Product Type&lt;/h4&gt;
  
                      &lt;li v-for="category in categories"&gt;
                        &lt;div class="product-type-filter-div" v-bind:data-attr="category.category" v-on:click="productTypeFilter"&gt;
                          @{{category.category}}
                        &lt;/div&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="pasd"&gt;
                &lt;ul&gt;
                  &lt;li&gt;@{{dataFilter}}&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Filter Data</strong> :</p>
  
  <blockquote>
    <p>{ "soryBy": "newest", "base_color": [ "000000", "999999" ],
    "category": [ "Jeans", "Shirt" ] }</p>
  </blockquote>
  
  <p>so far I can only filter if the data type is a string not with an array / object</p>
  
  <p>is it possible to filter using objects? or is there a better way to produce output like the picture above?</p>
  
  <p><strong>if u have good free tutorial about product filter pls share the link :(</strong></p>