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
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