Question

我有这样的数据：

> Price : ["800000","989000","780000","349000"]

如果用户选择按最低价格排序，我希望显示的数据由最低价格到最高价格组成，如下所示：

> Price : ["349000","780000","800000","989000"]

在此问题上，如果用户选择按最高价格排序，则可以正常工作，但是当选择按最低价格排序时，数据排列不正确

结果：

> Price : ["800000","989000","780000","349000"]

我正在使用vue.js

<p><strong>Sort By:</strong> <select v-model="sortBy">
  <option value="highestprice">Highest Price</option>
  <option value="lowestprice">Lowest Price</option>
  <option value="newestproduct">Newest Product</option>
  <option value="oldestproduct">Oldest Product</option>
</select>
</p>

    <script type="text/javascript">
      const product_list = new Vue({
        el:"#product-list",
        data:{
          filterBox:false,
          color:[],
          sortBy: null,
          productType:[],
          dataFilter:{
            soryBy:"",
            base_color:[],
            category:[]
          },
           isActive: false,
           products:{!! $products->toJson() !!},
           productcolors:{!!$productcolors->toJson()!!},
           categories:{!!$categories->toJson()!!},
           inputSearch:'',
        },
      computed:{
              filteredProduct:function(){
                return this.products.filter((product) => {
                  return (this.inputSearch.length === 0 || product.name.toLowerCase().includes(this.inputSearch.toLowerCase())
                  || product.category.toLowerCase().includes(this.inputSearch.toLowerCase())
                  || product.base_color.toLowerCase().includes(this.inputSearch.toLowerCase())
                  || product.product_code.toLowerCase().includes(this.inputSearch.toLowerCase()) ) &&
                  (this.color.length === 0 || this.color.includes(product.base_color)) &&
                  (this.productType.length === 0 || this.productType.includes(product.category))
                }).sort((a, b) => {
                            if (this.sortBy =='highestprice') {
                            return b.price-a.price;
                            }
                            else if (this.sortyBy =='lowestprice') {
                            return a.price-b.price;
                            }
                            else if(this.sortBy =='oldestproduct'){
                            return b.id-a.id;
                            }
                            else if(this.sortBy =='newestproduct'){
                                return a.id-b.id;
                            }

                          });

              }

            }

此代码有什么问题？我该如何解决这个问题？

Answer 1

您的代码中有错字...

else if (this.sortyBy =='lowestprice') {

->

else if (this.sortBy =='lowestprice') {

产品过滤器使用javascript / vue按最高或最低排序

1 个答案: