使用 Vue.js 的产品过滤器

Question

我想使用 vue.js 制作一个产品过滤器，可以根据最低价格或最高价格、颜色和产品类型进行过滤。实际上我想制作这样的产品过滤器：IMAGE PRODUCT FILTER HERE

我想从这里制作这样的过滤器产品：链接

我的产品数据：

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 2017_122" price:123 product :"ss18-1" product_color_id:3 status:1 stock:"2" weight:123123

Vue.js 代码

<script type="text/javascript">
      const product_list = new Vue({
        el:"#product-list",
        data:{
          filterBox:false,
          dataFilter:{
            soryBy:"",
            base_color:[],
            category:[]
          },
           isActive: false,
           products:{!! $products->toJson() !!},
           productcolors:{!!$productcolors->toJson()!!},
           categories:{!!$categories->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);
          },


        },


      });
    </script>

代码

<div class="product-filter-content" v-if="filterBox != false">
          <div class="row">
            <div class="col-md-4">
              <div class="product-filter-sortby">

                  <ul>
                    <h4>Sort By</h4>
                    <li><label for="highest" >Highest Price
                          <input type="checkbox" name="" id="highest" v-on:click="sortBy"   value="highest">
                        </label></li>
                        <li><label for="lowest" >Lowest Price
                              <input type="checkbox" name="" id="lowest" v-on:click="sortBy"   value="lowest">
                            </label></li>
                            <li><label for="newest" >Newest Product
                                  <input type="checkbox" name="" id="newest" v-on:click="sortBy"   value="newest">
                                </label></li>
                                <li><label for="oldest" >Oldest Product
                                      <input type="checkbox" name="" id="oldest" v-on:click="sortBy"   value="oldest">
                                    </label></li>
                  </ul>
              </div>
            </div>

            <div class="col-md-4">
              <div class="product-filter-color">

                  <ul>
                    <h4>Color</h4>
                    <li v-for="productcolor in productcolors">
                      <div class="product-color-filter-div" v-bind:data-attr="productcolor.base_color" v-on:click="colorFilter" v-bind:style="{backgroundColor:'#'+productcolor.base_color}">

                      </div>
                    </li>

                  </ul>
              </div>
            </div>

            <div class="col-md-4">
              <div class="product-filter-color">

                  <ul>
                    <h4>Product Type</h4>

                    <li v-for="category in categories">
                      <div class="product-type-filter-div" v-bind:data-attr="category.category" v-on:click="productTypeFilter">
                        @{{category.category}}
                      </div>
                    </li>
                  </ul>
              </div>
            </div>
          </div>

          <div class="pasd">
              <ul>
                <li>@{{dataFilter}}</li>
              </ul>
          </div>

        </div>

过滤数据：

{“soryBy”：“最新”，“base_color”：[“000000”，“999999”]，“类别”：[“牛仔裤”，“衬衫”]}

到目前为止，我只能过滤数据类型是不是带有数组/对象的字符串

是否可以使用对象进行过滤？或者有没有更好的方法来产生像上图这样的输出？

如果你有关于产品过滤器的免费教程，请分享链接:(

Answer 1

您已经拥有每个过滤器的值，无需将其包装到一个对象中。

您需要使用Array.filter和Array.sort根据其值应用每个过滤器。

甚至一些库可能支持按对象排序，但我相信他们会先循环键和值，然后应用过滤器。

PS：在您的代码中，您使用 Dom API 来获取每个元素的值/文本。这不是一个好主意。可能您想先阅读Vue 指南：表单输入绑定。

下面是一个简单的演示：

new Vue({
  el: '#app',
  data() {
    return {
      colors: [],
      sizes: [],
      products: [
        {name:'test1', color:'red', size:'XL'},
        {name:'test2', color:'black', size:'L'},
        {name:'test3', color:'red', size:'L'},
        {name:'test4', color:'black', size:'XL'},
        {name:'test5', color:'red', size:'L'},
        {name:'test6', color:'yellow', size:'XL'},
        {name:'test7', color:'black', size:'L'}
      ],
      sortBy: 'name',
      keyword: ''
    }
  },
  computed: {
    computedProducts: function () {
      return this.products.filter((item) => {
        return (this.keyword.length === 0 || item.name.includes(this.keyword)) &&
        (this.colors.length === 0 || this.colors.includes(item.color)) &&
        (this.sizes.length === 0 || this.sizes.includes(item.size))
      }).sort((a, b) => {
        return a[this.sortBy].toString().localeCompare(b[this.sortBy].toString())
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <p><strong>Keyword:</strong><input type="text" v-model="keyword"></p>
  <p><strong>Color:</strong>
  Red: <input type="checkbox" v-model="colors" value="red"/>
  Black: <input type="checkbox" v-model="colors" value="black"/>
  </p>
  <p><strong>Size:</strong>
  L: <input type="checkbox" v-model="sizes" value="L"/>
  XL: <input type="checkbox" v-model="sizes" value="XL"/>
  </p>
  <p><strong>Sort By:</strong> <select v-model="sortBy">
    <option value="name">Product Name</option>
    <option value="color">Color</option>
    <option value="size">Size</option>
  </select>
  </p>
  <table border="1">
  <caption>Total {{computedProducts.length}} Products</caption>
  <tbody>
    <tr v-for="(product, index) in computedProducts" :key="index">
      <td>{{product.name}}</td>
      <td>{{product.size}}</td>
      <td>{{product.color}}</td>
    </tr>
  </tbody>
  </table>
</div>