Vuejs渲染后分类
问题描述:
我有元素捆绑@单击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
它没有添加日期,但如果我们可以引用排序标题。谢谢。
答
也许你应该在计算属性中使用排序。
return limitBy(filterBy(
this.mutatedItems,
this.q,
'dateadded', 'title', 'album.name', 'artist.name', 'id',
),
this.numOfItems,
).sort(sortingFunction);
您可以在收到数据后在nextTick中调用window.sorted('dateadded')。更好的方法是在收到数据时对数据进行排序。 – Deepak
谢谢。它确实帮助:) –
很高兴,可以帮助! – Deepak