列表排序方法不更新顺序

Question

我正在尝试了解为什么此排序功能不起作用。

理论上，它的工作原理应该是这样的：https://codepen.io/levit/pen/abmXgBR

我有一个从 API 获取的列表：

<BookCard v-for='book in filteredBooks' :key='book.id' :book='book' />

我有一个用于搜索的过滤器，但我的排序不是。这是我的计算属性/方法的数据：

  data() {
    return {
      books: [],
      order: 1, // Ascending
      search: '',
    };
  },

computed: {
    filteredBooks() {
      return this.filterBySearch((this.sortByRating(this.books)));
    },
  },

  methods: {
    filterBySearch(books) {
      return books.filter((book) => book.volumeInfo.title
        .toLowerCase().match(this.search.toLowerCase()));
    },

    sortByRating(books) {
      return books
        .sort((r1, r2) => (r2.volumeInfo.averageRating - r1.volumeInfo.averageRating)
        * this.order);
    },

    sort() {
      this.order *= -1;
    },
  },

最后，我有一个切换顺序的按钮：

<button v-bind:class="order === 1 ? 'descending' : 'ascending'" @click="sort">
  Reader Rating
</button>

由于我是 Vue 新手，因此任何对我可能出错的地方的洞察都会非常有帮助。

谢谢。

Answer 1

尽量不要将 data 属性作为参数传递，因为它在方法中可用，并且只对过滤后的书籍而不是原始属性进行排序，因为排序会影响它：

computed: {
    filteredBooks() {
      let filtered= this.filterBySearch().slice();
      return this.sortByRating(filtered)
    },
  },

  methods: {
    filterBySearch() {
      return this.books.filter((book) => book.volumeInfo.title
        .toLowerCase().match(this.search.toLowerCase()));
    },

   sortByRating(books) {
      return books.sort((r1, r2) => {
        if (
          typeof r2.volumeInfo.averageRating === "number" &&
          typeof r1.volumeInfo.averageRating === "number"
        ) {
          return (
            (r2.volumeInfo.averageRating - r1.volumeInfo.averageRating) *
            this.order
          );
        } else {
          return this.order * -1;
        }
      });
    },

    sort() {
      this.order *= -1;
    },
  },