Vuejs渲染后分类

<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'）？即没有点击它。

所有我想要做的是能够获得访问排序（“dateadded”）

基本上我试图渲染之前，这个排序/显示： http://demo.koel.phanan.net/#!/songs（在演示登录后，使用链接） https://github.com/phanan/koel

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

来源

2017-04-07 Fahad Bilal

您可以在收到数据后在nextTick中调用window.sorted（'dateadded'）。更好的方法是在收到数据时对数据进行排序。 – Deepak

谢谢。它确实帮助:) –

很高兴，可以帮助！ – Deepak

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

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

来源

2017-04-07 07:31:00

Vuejs渲染后分类

回答

相关问题