列表排序方法不更新顺序

Posted 2023-02-16

【中文标题】列表排序方法不更新顺序

【英文标题】：List sorting method not updating order

【发布时间】：2021-04-23 12:17:40

【问题描述】：

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

理论上，它的工作原理应该是这样的：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 新手，因此任何对我可能出错的地方的洞察都会非常有帮助。

谢谢。

【参考方案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;
    ,
  ,

【讨论】：

感谢您的回复。我已经更新了我的代码，但是，由于某种原因，列表项的实际顺序似乎仍然没有更新。嗯...不过，这也确实阻止了我的搜索过滤器的工作

你能举个例子来调试它吗

我的错，搜索正在工作，但排序仍然没有更新

给你codesandbox.io/s/cranky-wilson-ly4oz

出现问题是因为 unrated 值不是数字，例如 4.5-"unrated" return NaN 会破坏排序，请查看我编辑的答案