O'Reilly logo

The Majesty of Vue.js by Kostas Maniatis, Alex Kyriakidis

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Ordered results

Sometimes we may want to display the items of an array ordered by some criteria. Luckily, there is an orderBy built-in filter, to sort our list in no time! First we will enhance our stories with a new property called upvotes. Then we'll go on and display our array ordered by the count of each story's upvotes. The more famous a story is, the higher it should appear:

<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <title>Famous Stories</title> </head> <body> <div class="container"> <h1>Let's hear some stories!</h1> <ul class="list-group"> <li v-for="story in stories | orderBy 'upvotes'" class="list-group-item" > {{ story.writer }} said "{{ story.plot }}" and upvoted ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required