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）返回，我无法从页面本身排序。那么我将如何继续排序预渲染或简单地在外部调用排序（'dateadded'）？即没有点击它。

我想做的就是能够访问sort（'dateadded'）

我基本上是在渲染/显示之前尝试对此进行排序： http://demo.koel.phanan.net/#!/songs（登录演示后，使用链接） 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);

Vuejs渲染后排序

1 个答案: