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

我有这样的数据：

> 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;
                            }

                          });

              }

            }

排序依据：
最高价格
最低价格
最新产品
老产品

常量产品列表=新的Vue({
el:“产品清单”，
数据：{
过滤器盒：错误，
颜色：[]，
sortBy:null，
产品类型：[]，
数据过滤器：{
对不起：“，
基本颜色：[]，
类别：[]
},
I：错，
产品：{！！$products->toJson（）！！}，
ProductColor:{！！$ProductColor->toJson（）！！}，
类别：{！！$categories->toJson（）！！}，
输入搜索：“”，
},
计算：{
filteredProduct:函数（）{
返回此.products.filter（（产品）=>{
return（this.inputSearch.length==0 | | product.name.toLowerCase（）.includes（this.inputSearch.toLowerCase（））
||product.category.toLowerCase（）包括（this.inputSearch.toLowerCase（））
||product.base_color.toLowerCase（）包括（this.inputSearch.toLowerCase（））
||product.product_code.toLowerCase（）包括（this.inputSearch.toLowerCase（））&&
（this.color.length==0 | | this.color.includes（product.base_color））&&
（this.productType.length==0 | | this.productType.includes（product.category））
}).排序（（a，b）=>{
如果（this.sortBy=='highestprice'）{
返回b.price-a.price；
}
else if（this.sortyBy=='lowerstprice'）{
返回a.price-b.price；
}
else if（this.sortBy=='oldestproduct'）{
返回b.id-a.id；
}
else if（this.sortBy=='newestproduct'）{
返回a.id-b.id；
}
});
}
}

---

此代码有什么问题？如何解决此问题？

您的代码中有一个输入错误

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

->

---

您的代码中有一个输入错误

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

->