⏰ 20 mins

1. In this exercise, let’s add a leader board to the top of the page to show the top 3 candidates
2. Use a computed prop to filter the candidates to only the top 3 with votes (can be less if no votes)
3. Replace the hardcoded leaderboard with the users in the computed prop to display them on the page
4. If there is no one on the leader board display the message: “No one has any votes yet”
5. By the end of the exercise, you should have something that looks like this and correctly puts the top 3 users in the leaderboard

computed-exericse.mp4

💪 Bonus

🏁 Starting Point | ✅ Solution

If you finish the above exercise with time left over, then try your hand at this bonus exercise!

On this page we should have the same users displayed as normal, but paginated 3 at a time from a fake API endpoint (just json files in the public directory).

Currently, no users are displayed on page 1 and the rest of the pages show the incorrect users.

Your task is to figure out why and fix it!

Helpful Resources

1. Vue.js Docs - Reactivity Fundamentals