Vuejs Sorting after rendering

Question

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.

you can call window.sorted('dateadded') inside nextTick after you have received the data. Better way is to sort the data when you receive it. — Deepak
– Deepak, Commented Apr 7, 2017 at 9:28

Kirill Matrosov · Accepted Answer · 2017-04-07 07:31:00Z

1

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);

answered Apr 7, 2017 at 7:31

Kirill Matrosov

6,0404 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs Sorting after rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related