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
One solution 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
How'd you do,
were you able to complete the challenge?
0:00
Let's get started on the first task.
0:03
The first thing I'll do is display
the data in my template by using a v4 view
0:05
directive to loop through
the array of objects.
0:10
So here I'll say v-for="post in posts".
0:17
Next I'll change the template
variables to access each individual
0:23
post object through dot notation.
0:28
So I'll say post.votes, post.thumbnail,
0:30
post.title, and post.summary,
0:36
let's check to see if this works.
0:41
Great, I'll modify the increment and
decrement methods that are being
0:45
called on these spans by passing
in the individual posts.
0:50
This way, the method knows on which
post to modify the votes property.
0:54
I'll be sure to pass the individual post
to the methods in the view instance.
1:00
And access the post vote
count inside of the function.
1:05
Let's test and make sure this works.
1:24
Excellent, let's get the new listing
functionality up and running.
1:29
I know I'm going to want to get
the information the user has typed in
1:34
these fields.
1:37
To capture that information, I'll create
two new properties on my data object.
1:38
Title and summary.
1:45
I'll set them both to an empty string.
1:51
In my template, I'll link these
input fields with the title and
1:53
summary properties I just
created in my view instance.
1:56
I'll do this using the v model directive.
2:00
Now that I've connected the form
fields with my view data object,
2:19
I'll need a method to create
a new post with that data and
2:22
push the new post into the posts array.
2:26
I know when the user clicks
this Create New button,
2:29
I'll want to run that function.
2:32
I'll use v-on to add that method
to the button, to fire on click.
2:34
I'll name the function createNew.
2:40
Let's create this method
on the view instance.
2:50
Inside createNew, I wanna push
2:57
a new object into the posts array, so
3:01
I'll say this.posts.push.
3:06
Into posts, I'll push a new object
that sets the value of title and
3:10
summary to the data I'm
collecting from the form.
3:15
I'll do that by setting its title and
summary values to this.title and
3:20
this.summary.
3:24
Now we'll set default values for
the rest of the post object.
3:30
Let's save and
make sure we can add a new object.
3:36
Amazing, great, we're nearly finished.
3:48
Let's order the list so
3:52
that the items appear in descending
order based on vote count.
3:53
I'll do that by creating a computed
property called ordered votes.
3:56
Inside orderedList, I'll copy and
4:09
paste the provided code,
4:14
I'm going to call this orderedList.
4:18
This code sorts the posts array according
to the number of votes in each post.
4:25
Again, sort is a native JavaScript
function that has nothing to do with view.
4:33
See the teacher's notes if you'd
like to know more about how
4:38
the sort function works.
4:41
So we've set up a computed property
that returns a sorted list.
4:42
Now we just need to make sure
that this sorted list is the list
4:47
we are iterating through
in the view template.
4:50
So I will go to my template and change
post in posts to post in orderedList.
4:52
Let's see if this works.
5:03
So good, and finally,
5:07
after a new post is made,
5:11
I'll set this.title and
5:15
this.summary back to blank
5:19
strings to clear out their fields.
5:24
And that's the challenge
5:35
complete.
5:42
If you wanna go further, see if you can
prevent users from submitting empty posts.
5:46
Create functionality that
reveals a whole article and
5:52
a larger photo when
the listing is clicked.
5:55
Display the date that
the post was submitted.
5:57
The possibilities are endless.
6:00
Have fun, keep practicing, and
until next time, happy coding.
6:02
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