Sorting in VueJS 2

Question

I'm trying to sort a list of items in VueJS 2 with slice().sort(), but it doesn't have any effect. In vuejs 1 there was a nice orderBy filter, but they removed this. My current setup is as followed:

<table>
        <thead>
          <tr>
            <th v-for="column in columns" v-on:click="sortBy(column)">{{ column }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="customer in customerslist">
            <td>{{ customer.firstname }}</td>
            <td>{{ customer.surname }}</td>
            <td>{{ customer.added }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

...

      sortBy(sortKey) {
        this.customerslist = this.customerslist.slice().sort(sortKey);
        console.log(sortKey);
        console.log(this.customerslist[0].firstname);
      }

It's a 2 dimensional array with customers. Each customers has a firstname, surname, and added field.

But this always returns the same firstname in console if I click the firstname column header (while this isn't the alphabetically correct one). How does sorting work, since I can't find the right documentation on it.

Aletheios · Accepted Answer · 2016-11-15 22:33:17Z

4

Your problem doesn't have anything to do with Vue. Array sorting in JavaScript just works differently than you expected. You can't pass a key to sort(); instead you have to implement your own compare function:

this.customerslist.sort((a, b) => a[sortKey].localeCompare(b[sortKey]));

Also sorting works in-place so it shouldn't be necessary to copy and reassign the array.

edited Nov 15, 2016 at 22:33

answered Nov 11, 2016 at 22:54

Aletheios

4,0202 gold badges36 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Sorting in VueJS 2

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