1 00:00:00,450 --> 00:00:04,000 We've learned how we can evaluate simple JavaScript expressions in our view 2 00:00:04,000 --> 00:00:09,620 templates, such as the expression we used in the v-show directive in the last video. 3 00:00:13,794 --> 00:00:18,204 Many times, however, we want to keep our templates as clean and easy to maintain as 4 00:00:18,204 --> 00:00:21,746 possible by keeping complicated logic within the view instance. 5 00:00:21,746 --> 00:00:27,820 A feature of view that helps us out here is called computed properties. 6 00:00:27,820 --> 00:00:31,821 Computed properties are a feature of view that help us perform more complex 7 00:00:31,821 --> 00:00:35,640 calculations or operations that affect the way our data is displayed. 8 00:00:36,870 --> 00:00:39,530 We can use a computed property in our project 9 00:00:39,530 --> 00:00:42,290 to get rid of the duplicates in this list. 10 00:00:42,290 --> 00:00:43,090 So let's do that. 11 00:00:44,170 --> 00:00:48,600 Right now I'm looping through the media list, getting all of the media types and 12 00:00:48,600 --> 00:00:52,170 setting the types as options in the select menu. 13 00:00:52,170 --> 00:00:56,090 The problem of course is that many of these media items are the same type. 14 00:00:56,090 --> 00:00:58,190 So we have a lot of repetition in the list. 15 00:00:59,370 --> 00:01:03,330 To solve this, we'll write a computed property that looks at our media list, 16 00:01:03,330 --> 00:01:05,982 eliminates the duplicates, and returns a new list. 17 00:01:07,470 --> 00:01:10,602 We'll add another option to our view instance called computed. 18 00:01:13,550 --> 00:01:20,269 So down here, under methods, I'll make a new object called computed. 19 00:01:23,755 --> 00:01:28,671 And inside the computed object, I'll create a property called 20 00:01:28,671 --> 00:01:33,575 uniqueItemsList, Which will be a function. 21 00:01:35,650 --> 00:01:39,270 Inside this method, we're going to write some totally normal JavaScript 22 00:01:39,270 --> 00:01:43,390 that will return a new list that doesn't contain any duplicates. 23 00:01:43,390 --> 00:01:46,240 Now there are a lot of ways that we could check for duplicates. 24 00:01:46,240 --> 00:01:47,960 We could use the regular for loop. 25 00:01:47,960 --> 00:01:50,810 We could use a couple of fancy array methods. 26 00:01:50,810 --> 00:01:53,660 If you have ideas, I would encourage you to pause the video and 27 00:01:53,660 --> 00:01:55,980 see if you can work it out for yourself. 28 00:01:55,980 --> 00:01:58,260 But here's the way I'm going to do it. 29 00:01:58,260 --> 00:02:00,323 First, I'll create a new empty array. 30 00:02:06,310 --> 00:02:08,490 Then I'm going to grab our media items. 31 00:02:08,490 --> 00:02:14,790 Remember, I can do that by referring to this.mediaList, 32 00:02:14,790 --> 00:02:18,790 which refers to our media array full of media objects. 33 00:02:20,520 --> 00:02:23,954 Then I'm going to say for each individual item in the list, 34 00:02:23,954 --> 00:02:27,945 if the item's type isn't already in my new array, push it in there. 35 00:02:30,780 --> 00:02:33,346 So we'll look at each individual item. 36 00:03:08,083 --> 00:03:11,020 So let me try to quickly explain this logic. 37 00:03:11,020 --> 00:03:14,230 For example, let's say it looks at the first item in the media list, 38 00:03:14,230 --> 00:03:16,620 which is the book, Hop on Pop. 39 00:03:16,620 --> 00:03:20,620 Which has a type of book, it will look in the types array. 40 00:03:20,620 --> 00:03:24,870 And it won't find the type, book, because the array is empty. 41 00:03:24,870 --> 00:03:28,580 So it will push that type, book, into the array. 42 00:03:28,580 --> 00:03:32,300 However when we get to the next book, Sirens of Titan, it will look in 43 00:03:32,300 --> 00:03:37,620 the array, find the type, book, and it won't push that type in again. 44 00:03:37,620 --> 00:03:40,728 The result is an array of unique media types. 45 00:03:40,728 --> 00:03:43,000 So after we're done looking at all the types and 46 00:03:43,000 --> 00:03:46,130 pushing unique types into the array, we'll return that array. 47 00:03:47,880 --> 00:03:51,189 Let's quickly open up the console and look at view dev tools. 48 00:04:03,520 --> 00:04:08,315 Oops, we need to make sure this says computed and not computer. 49 00:04:08,315 --> 00:04:11,080 If you're like me, that's a typo that you'll make constantly. 50 00:04:11,080 --> 00:04:12,857 So, watch out for that. 51 00:04:15,039 --> 00:04:19,250 So we now have a property we can examine called computed. 52 00:04:19,250 --> 00:04:23,495 And inside is an array of items called uniqueItemsList. 53 00:04:24,700 --> 00:04:28,310 If you're still confused about this logic, don't worry too much about it. 54 00:04:28,310 --> 00:04:33,080 The important part is to understand that uniqueItemsList returns a list of unique 55 00:04:33,080 --> 00:04:33,919 media types. 56 00:04:33,919 --> 00:04:38,130 And we can now refer to this computed property in our template where we need it. 57 00:04:38,130 --> 00:04:38,829 So, let's do that. 58 00:04:41,413 --> 00:04:45,580 Go back to index.html, and here on line 17, 59 00:04:45,580 --> 00:04:50,582 where we're looping through mediaList for item types, 60 00:04:50,582 --> 00:04:56,980 we're going to delete mediaList and replace it with uniqueItemsList. 61 00:04:56,980 --> 00:05:00,760 And now we're looping through an array, rather than an array of objects, so 62 00:05:00,760 --> 00:05:02,910 we no longer need dot notation here. 63 00:05:04,770 --> 00:05:08,490 We can just say we want to display whatever alias we're using here, 64 00:05:08,490 --> 00:05:09,210 which is item. 65 00:05:12,230 --> 00:05:14,670 So, let's save and take a look at this. 66 00:05:16,780 --> 00:05:18,670 And fantastic. 67 00:05:18,670 --> 00:05:23,276 Now if we add a new item to the list with a brand new type, 68 00:05:25,884 --> 00:05:28,930 So I will copy and paste this twice. 69 00:05:36,197 --> 00:05:40,940 And we will change this type to e-book, 70 00:05:40,940 --> 00:05:44,015 and this type to e-book. 71 00:05:47,501 --> 00:05:53,277 And I'll just call this Title 1 for now, and this will be Title 2. 72 00:05:57,349 --> 00:06:02,329 Now if we save and refresh, we can see that e-book appears in the menu, and 73 00:06:02,329 --> 00:06:04,510 it only appears once. 74 00:06:04,510 --> 00:06:06,060 Fantastic. 75 00:06:06,060 --> 00:06:08,490 A key difference between computed properties and 76 00:06:08,490 --> 00:06:11,360 regular view methods is that computed properties 77 00:06:11,360 --> 00:06:15,370 update automatically when the data it relies upon changes. 78 00:06:15,370 --> 00:06:18,320 Whereas methods only run when they are explicitly called. 79 00:06:19,400 --> 00:06:24,160 A benefit of computed properties is that they only update when the data changes. 80 00:06:24,160 --> 00:06:25,431 So theoretically, 81 00:06:25,431 --> 00:06:30,470 I could move the uniqueItemsList property into my methods object. 82 00:06:30,470 --> 00:06:35,502 Then I could go to index.html and 83 00:06:35,502 --> 00:06:43,420 explicitly call the method in my v-for directive. 84 00:06:45,550 --> 00:06:48,112 So I have to explicitly call it here, 85 00:06:48,112 --> 00:06:51,676 otherwise you'll see it will not update the list. 86 00:06:54,902 --> 00:06:57,960 So I have to use parentheses here to explicitly call it. 87 00:07:00,180 --> 00:07:02,270 And that would work the same way. 88 00:07:02,270 --> 00:07:06,920 However, the difference is that as a method, uniqueItemsList is going to run 89 00:07:06,920 --> 00:07:10,135 every single time I choose a new type from the select menu. 90 00:07:10,135 --> 00:07:15,940 Computed properties, on the other hand, are cached, meaning view will just 91 00:07:15,940 --> 00:07:20,910 keep using the same data until it detects that the underlying data has changed. 92 00:07:20,910 --> 00:07:23,176 This can help our applications perform better. 93 00:07:23,176 --> 00:07:28,747 So, I'll undo and put everything back to the way we had it. 94 00:07:37,880 --> 00:07:40,250 And this is looking great. 95 00:07:40,250 --> 00:07:44,003 Before we move on, let's quickly fix the other issue here. 96 00:07:44,003 --> 00:07:47,773 You may have noticed that once we've chosen an option, there's no way to get 97 00:07:47,773 --> 00:07:50,860 back to the full list, unless you completely reload the page. 98 00:07:51,990 --> 00:07:55,428 And also when the page has reloaded, you can't see anything. 99 00:07:55,428 --> 00:08:00,607 To fix this, I'll add a blank value to the first option in our select menu. 100 00:08:03,554 --> 00:08:05,510 And this is just regular HTML. 101 00:08:07,240 --> 00:08:11,526 And then in this v-show directive, 102 00:08:11,526 --> 00:08:15,396 I will add to this expression, so 103 00:08:15,396 --> 00:08:20,382 that it says if type equals a blink string, 104 00:08:22,455 --> 00:08:25,390 Or if type equals media type. 105 00:08:25,390 --> 00:08:29,040 So this is saying if the type property is equal to an empty string, 106 00:08:29,040 --> 00:08:35,510 which it is initially, because that's how we've said it, then show the item. 107 00:08:35,510 --> 00:08:39,590 So, the result is that all the items in the list will show. 108 00:08:39,590 --> 00:08:43,760 This is basically another way of saying show all the items in the list 109 00:08:43,760 --> 00:08:46,050 if the type property is equal to an empty string. 110 00:08:47,500 --> 00:08:50,062 Let's make sure this works, and great.