CODEWITHSUNDEEP
javascriptvue.jslodashvuejs2
Fahad Bilal
Fahad Bilal

Reputation: 159

Vuejs Sorting after rendering

I've got elements tied to @click

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

what i'd like to do is to call this on page load / or when the component renders in vuejs, in that way i'd be able to have a presorted table when it opens up. apparently, if i call it after rendering it still doesn't sort.

here's a loop to display the items.

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

and in computed i've 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);},
  }

now the thing is if i return with orderby (displayedItems2) i'm unable to sort from the page itself. so how would i go on about sorting pre-render or simply call the sort('dateadded') externally? i.e., without clicking onto it.

All i want to do is to be able to get access to sort('dateadded')

i'm basically trying to sort this before rendering/displaying: http://demo.koel.phanan.net/#!/songs (after logging in the demo, use the link) https://github.com/phanan/koel

it doesn't have date-added, but if we can reference sorting title. thank you.

Upvotes: 1

Views: 1093

Answers (1)

Kirill Matrosov
Kirill Matrosov

Reputation: 6000

Maybe you shoud use sorting in computed property. 

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

Upvotes: 1

Related Questions