如何在 VueJS 中创建排序功能？

Question

我正在尝试在我的 VueJS 代码中创建排序函数。它有这些字段：Price: Low to High、Price: High to Low.

所以，这是我的 template:

<div name="divSortBy">
        <span>
          Sort by:
        </span>
        <select v-model="sort" name="selectSortBy">
          <option
            v-for="item in sortedList"
            :key="item.id"
            name="selectOptionsSortBy"
            :value="item"
            @click="sortBy"
            v-text="item.title"
          ></option>
        </select>
      </div>

data() { return {} }中的这个：

sortByItems: [
    {
      id: 1,
      title: 'Price: Low to High',
      sort: 1
    },
    {
      id: 2,
      title: 'Price: High to Low',
      sort: 2
    }
  ],
  sort: null
productsList: [],

这是computed:

computed: {
sortedList() {
  // FILTER HERE
  if (this.sort) {
    if (this.sort.id === '1') {
      console.log(this.sort.title) // console.log for tests
      this.productsList.sort(function(a, b) {
        return a.price - b.price
      })
    } else if (this.sort.id === '2') {
      console.log(this.sort.title)
    }
  }

  return this.sortByItems
}

如您所见，我试图通过此函数对其进行排序，但它不起作用：

this.productsList.sort(function(a, b) {
        return a.price - b.price
      }

顺便说一下，productsList: [] 是对象列表，因此，我需要按 price 字段对其进行排序，然后在页面上显示排序后的产品。

谢谢！

Answer 1

可以通过比较器函数自定义排序算法

DEMO

if (this.sort.id === "1") {
  return [...this.productsList].sort(function (a, b) {
    return a.price - b.price;
  });
} else if (this.sort.id === "2") {
   return [...this.productsList].sort(function (a, b) {
    return b.price - a.price;
  });
}

如何在 VueJS 中创建排序功能？

How to create sort function in VueJS?

javascript

vue.js

vue-component

vuejs2