Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Vue.js List Rendering!
You have completed Practice Vue.js List Rendering!
Preview
An introduction to the challenge
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up