1
00:00:00,000 --> 00:00:08,930
[MUSIC]

2
00:00:08,930 --> 00:00:13,075
Welcome to the second practice session for
Vue.js basics.

3
00:00:13,075 --> 00:00:17,172
Practice sessions are a chance to solidify
your knowledge with a bit of hands-on

4
00:00:17,172 --> 00:00:17,920
practice.

5
00:00:17,920 --> 00:00:21,970
This challenge assumes that you've
completed the Vue.js basics course or

6
00:00:21,970 --> 00:00:23,880
have equivalent knowledge.

7
00:00:23,880 --> 00:00:27,780
To successfully complete the challenge,
you'll need to be familiar with the basics

8
00:00:27,780 --> 00:00:33,080
of Vue.js directives, computer properties,
list rendering, and event handling.

9
00:00:33,080 --> 00:00:35,800
This challenge builds upon
our previous challenge

10
00:00:35,800 --> 00:00:38,930
where we started to build
a very simple front end for

11
00:00:38,930 --> 00:00:42,420
an application that posts and
ranks articles from the Internet.

12
00:00:42,420 --> 00:00:45,372
You'll find a link to the first
practice session on this page.

13
00:00:45,372 --> 00:00:48,396
If you haven't yet
completed the first part of the challenge,

14
00:00:48,396 --> 00:00:49,889
I would encourage you to do so.

15
00:00:49,889 --> 00:00:53,548
But I'm providing all of the project
files you'll need to get started.

16
00:00:53,548 --> 00:00:57,860
Open up app.js from the folder called
start in your preferred text editor

17
00:00:57,860 --> 00:00:59,950
to view the challenge steps.

18
00:00:59,950 --> 00:01:02,100
If you've completed
the first practice session,

19
00:01:02,100 --> 00:01:05,190
notice that a few things
have been modified.

20
00:01:05,190 --> 00:01:07,750
Instead of data for a single post,

21
00:01:07,750 --> 00:01:13,490
I've created a new data property that
points to an array of post objects.

22
00:01:13,490 --> 00:01:20,510
A couple of input elements have also been
added to the Vue template in index.html.

23
00:01:20,510 --> 00:01:23,400
This challenge is
comprised of three parts.

24
00:01:23,400 --> 00:01:26,760
First, you'll modify the Vue template and
existing methods so

25
00:01:26,760 --> 00:01:30,520
that they work with a list
rather than a single post.

26
00:01:30,520 --> 00:01:34,360
And ensure that all the data for
each post displays properly.

27
00:01:34,360 --> 00:01:39,314
This includes modifying the increment and
decrement methods so

28
00:01:39,314 --> 00:01:42,897
that they'll work for
each individual post.

29
00:01:42,897 --> 00:01:45,669
Second, you'll program these input fields,
so

30
00:01:45,669 --> 00:01:48,046
that the user can add
a new post to the list.

31
00:01:52,411 --> 00:01:54,977
You'll do that by using
v model to capture and

32
00:01:54,977 --> 00:01:57,744
track what the user enters
into the form fields,

33
00:01:57,744 --> 00:02:02,950
then creating a new object with that data
and pushing it into the post's array.

34
00:02:02,950 --> 00:02:07,920
Finally, you'll create a way to sort
the list of posts by their vote count so

35
00:02:07,920 --> 00:02:12,260
that the posts with the highest number of
votes appears at the top of the list and

36
00:02:12,260 --> 00:02:13,690
descends from there.

37
00:02:13,690 --> 00:02:14,640
Because the logic for

38
00:02:14,640 --> 00:02:19,590
sorting has little to do with using Vue
itself, I've provided that code for you.

39
00:02:21,220 --> 00:02:25,310
This code uses sort, a native Java
script function to return an array of

40
00:02:25,310 --> 00:02:28,610
code sorted in descending
order by the number of votes.

41
00:02:28,610 --> 00:02:31,730
Consult the teacher's notes if you'd
like to read more about how the sort

42
00:02:31,730 --> 00:02:33,070
function works.

43
00:02:33,070 --> 00:02:36,910
However, your task for the purpose of
this challenge will be to create and

44
00:02:36,910 --> 00:02:39,780
implement a computed property
that uses this code.

45
00:02:40,810 --> 00:02:43,660
Be sure to read
the instructions carefully, and

46
00:02:43,660 --> 00:02:46,690
remember that this challenge is open book.

47
00:02:46,690 --> 00:02:51,360
Don't hesitate to consult previous
coursework, the Vue.js documentation, or

48
00:02:51,360 --> 00:02:54,110
Google to help you arrive at a solution.

49
00:02:54,110 --> 00:02:55,390
Good luck, and have fun with it.