Vue 2.0 ordering data displayed by a v-for

Hi, I've just started learning Vue 2.0. Is it possible to order the data that gets displayed by a v-for? For example If I'm passing in an array where each item has a sort_on value, I'd like it to display in that order?

I read the docs and thought setting a key like so would do it

<li v-for="item in passedList" :key="item.id">{{ item.name }}</li>

but that doesn't seem to be the case?

https://jsbin.com/facisirika/edit?html,js,output

How should I be doing this?

Thanks :)

wells

9 years ago

Best Answer

Level 19

You can use a combination of a computed property with either native Array methods (i.e. filter, map, etc) or a package like lodash to help filter/order your data.

https://lodash.com/

Vue.JS documentation mentions the use of a computed property

https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

Here is an example of lodash in use on a computed property

https://github.com/wells/airflix/blob/master/resources/assets/js/components/Movies.vue#L185-L207

borisrabbit

9 years ago

Level 4

Got it, thanks for the excellent explanation

abkrim

8 years ago

Level 13

Hi @wells .. You can update link? Now get 404 error. Apreciate help.

Please or to participate in this conversation.