Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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