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
One solution to the challenge.
This video doesn't have any notes.
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
Welcome back, let's walk through
one solution to the challenge.
0:00
And remember, if your solution is
a bit different that's perfectly fine.
0:03
First let's create new Vue instance.
0:08
I'll pass the Vue instance object with
three properties, el, data and methods.
0:16
I'll specify the div with
the id of app as our template.
0:31
I'll add some data for post, creating
properties for title, summary, votes,
0:37
and thumbnail.
0:42
I'll save, go to index.html and
using moustache syntax,
0:49
I'll add variables to my templates to
display the properties I've just created.
0:54
So here where it says votes,
I will say votes.
0:59
I'll replace the post title with title,
1:05
and the summary with summary.
1:11
I'll use vbind to bind the thumbnail
image URL to the image tag.
1:15
I'll save and open up index.html in the
browser to make sure that all of my data
1:28
is displaying correctly.
1:33
Great, now create some methods to add
functionality to this vote counter.
1:35
First, in the view template,
1:42
I'll add a v-on click directive
to both spam elements.
1:44
When the plus sign is clicked,
I want to call a method called increment.
2:01
When the minus sign is clicked,
I want to call a method called decrement.
2:06
Now I'll go my view instance and create
the increment and decrement methods.
2:12
Inside the increment method,
I'll wanna get the value of votes.
2:33
Remember, I can access that
value by saying this.votes.
2:39
To increment I'll add one vote
to the votes property total.
2:45
And to decrement I'll do the same thing,
2:53
only I'll subtract one vote
from the votes property.
2:55
Let's go to our preview and
see if this works.
3:03
And it works, fantastic.
3:11
In an upcoming practice session,
you'll get the chance to enhance this
3:14
project further by adding the ability to
display multiple posts, add new posts and
3:17
order posts in descending
order by vote count.
3:22
That's it for this practice session.
3:25
Keep pushing forward, and happy coding.
3:27
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