渲染后的Vuejs排序

Question

我已经将元素绑定到@click

<th @click="sort('dateadded')" class="created_at">Date Added

我想做的是在页面加载/或组件在 vuejs 中呈现时调用它，这样我就可以在它打开时拥有一个预排序的表。显然，如果我在渲染后调用它仍然无法排序。

这是一个显示项目的循环。

<tr is="song-item" v-for="item in displayedItems"  :orderBy="dateadded" :song="item" ref="rows"></tr>

在计算中我有以下内容：

computed: {

    displayedItems() {

      return limitBy( filterBy(
          this.mutatedItems,
          this.q,
          'dateadded', 'title', 'album.name', 'artist.name',  'id',
        ),
        this.numOfItems,
      );
    },

     //displayedItems2(){return orderBy (limitBy (filterBy( this.mutatedItems, this.q, 'title', 'album.name', 'artist.name', 'dateadded'  ), this.numOfItems,  ), 'dateadded', -1);},
  }

现在的问题是，如果我返回 orderby (displayedItems2)，我将无法从页面本身进行排序。那么我将如何继续对预渲染进行排序或简单地在外部调用 sort('dateadd') 呢？即，无需点击它。

我想做的就是能够访问 sort('dateadded')

我基本上是在渲染/显示之前尝试对此进行排序： http://demo.koel.phanan.net/#!/songs（登录demo后使用链接） https://github.com/phanan/koel

它没有添加日期，但如果我们可以引用排序标题。谢谢。

Answer 1

也许你应该在计算属性中使用排序。

  return limitBy( filterBy(
      this.mutatedItems,
      this.q,
      'dateadded', 'title', 'album.name', 'artist.name',  'id',
    ),
    this.numOfItems,
  ).sort(sortingFunction);