Well done!

You have completed Practice Vue.js List Rendering!

Preview

Vue.js List Rendering: The Challenge

2:56 with Treasure Porth

An introduction to the challenge

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Welcome to the second practice session for Vue.js basics. 0:08

Practice sessions are a chance to solidify your knowledge with a bit of hands-on 0:13

practice. 0:17

This challenge assumes that you've completed the Vue.js basics course or 0:17

have equivalent knowledge. 0:21

To successfully complete the challenge, you'll need to be familiar with the basics 0:23

of Vue.js directives, computer properties, list rendering, and event handling. 0:27

This challenge builds upon our previous challenge 0:33

where we started to build a very simple front end for 0:35

an application that posts and ranks articles from the Internet. 0:38

You'll find a link to the first practice session on this page. 0:42

If you haven't yet completed the first part of the challenge, 0:45

I would encourage you to do so. 0:48

But I'm providing all of the project files you'll need to get started. 0:49

Open up app.js from the folder called start in your preferred text editor 0:53

to view the challenge steps. 0:57

If you've completed the first practice session, 0:59

notice that a few things have been modified. 1:02

Instead of data for a single post, 1:05

I've created a new data property that points to an array of post objects. 1:07

A couple of input elements have also been added to the Vue template in index.html. 1:13

This challenge is comprised of three parts. 1:20

First, you'll modify the Vue template and existing methods so 1:23

that they work with a list rather than a single post. 1:26

And ensure that all the data for each post displays properly. 1:30

This includes modifying the increment and decrement methods so 1:34

that they'll work for each individual post. 1:39

Second, you'll program these input fields, so 1:42

that the user can add a new post to the list. 1:45

You'll do that by using v model to capture and 1:52

track what the user enters into the form fields, 1:54

then creating a new object with that data and pushing it into the post's array. 1:57

Finally, you'll create a way to sort the list of posts by their vote count so 2:02

that the posts with the highest number of votes appears at the top of the list and 2:07

descends from there. 2:12

Because the logic for 2:13

sorting has little to do with using Vue itself, I've provided that code for you. 2:14

This code uses sort, a native Java script function to return an array of 2:21

code sorted in descending order by the number of votes. 2:25

Consult the teacher's notes if you'd like to read more about how the sort 2:28

function works. 2:31

However, your task for the purpose of this challenge will be to create and 2:33

implement a computed property that uses this code. 2:36

Be sure to read the instructions carefully, and 2:40

remember that this challenge is open book. 2:43

Don't hesitate to consult previous coursework, the Vue.js documentation, or 2:46

Google to help you arrive at a solution. 2:51

Good luck, and have fun with it. 2:54

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace