Currently, I have elements linked to @click event listeners.
<th @click="sort('dateadded')" class="created_at">Date AddedI am looking for a way to automatically trigger this sorting function when the Vue.js component renders, so that the table is pre-sorted when it loads. Even if I call the sort function after rendering, the table does not get sorted as desired.
Here's a loop to list the items:
<tr is="song-item" v-for="item in displayedItems" :orderBy="dateadded" :song="item" ref="rows"></tr>
In the computed properties, I have the following:
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);},
}
The issue arises when I try to use orderby(displayedItems2) as it prevents me from sorting directly on the page itself. How can I achieve pre-render sorting or trigger the sort('dateadded') externally without requiring a click?
My ultimate goal is to be able to access and apply the sort('dateadded') function.
I am essentially attempting to sort the data before rendering/displaying, similar to the example shown here: (after logging in the demo, use the provided link) https://github.com/phanan/koel
Although the example doesn't specifically involve date-added sorting, referencing title sorting would suffice. Thank you.