1
00:00:02,040 --> 00:00:06,240
Now we can add and view and update the todos,

2
00:00:06,240 --> 00:00:08,980
the last missing crowd functionality here

3
00:00:08,980 --> 00:00:11,130
is that we can delete todos.

4
00:00:11,130 --> 00:00:12,340
Before we're done, of course,

5
00:00:12,340 --> 00:00:15,100
we'll also wire this up to a custom API

6
00:00:15,100 --> 00:00:16,520
so that we really see

7
00:00:16,520 --> 00:00:18,910
how we could have replaced this JavaScript code

8
00:00:18,910 --> 00:00:20,710
with Vue.js.

9
00:00:20,710 --> 00:00:22,280
But you hopefully already see

10
00:00:22,280 --> 00:00:24,090
that it's way easier

11
00:00:24,090 --> 00:00:27,083
and way more straightforward in the end.

12
00:00:28,400 --> 00:00:30,240
Now when it comes to deleting todos,

13
00:00:30,240 --> 00:00:32,780
that is really simple.

14
00:00:32,780 --> 00:00:36,880
We can just add another method in our methods object here

15
00:00:36,880 --> 00:00:41,160
where we also added saveTodo and startEditTodo.

16
00:00:41,160 --> 00:00:43,753
And well, fittingly, I'll name it deleteTodo.

17
00:00:45,020 --> 00:00:47,253
And just as with startEditTodo,

18
00:00:48,140 --> 00:00:51,850
I expect to get the id of the todo that should be deleted

19
00:00:51,850 --> 00:00:53,503
as a parameter value.

20
00:00:54,640 --> 00:00:58,840
And then we wanna basically go to our todos array,

21
00:00:58,840 --> 00:01:01,860
so this data todos array here,

22
00:01:01,860 --> 00:01:06,800
and filter it such that that todo that has the id

23
00:01:06,800 --> 00:01:09,170
that we get as a parameter value here

24
00:01:09,170 --> 00:01:10,880
is removed from that array,

25
00:01:10,880 --> 00:01:12,393
that it's filtered out.

26
00:01:13,820 --> 00:01:18,347
So I wanna set this.todos = this.todos.filter,

27
00:01:19,230 --> 00:01:21,980
another built-in method which we have used before

28
00:01:21,980 --> 00:01:23,580
in the course already,

29
00:01:23,580 --> 00:01:27,540
which allows us to filter out elements in an array.

30
00:01:27,540 --> 00:01:29,900
Filter will return a new array,

31
00:01:29,900 --> 00:01:33,110
which is the old array minus all the elements

32
00:01:33,110 --> 00:01:37,393
for which a function that we pass to filter returned false.

33
00:01:38,370 --> 00:01:39,850
This function, as always,

34
00:01:39,850 --> 00:01:42,520
will execute for all the todoItems

35
00:01:42,520 --> 00:01:44,340
step by step after another.

36
00:01:44,340 --> 00:01:47,100
And if we return true, we keep an item.

37
00:01:47,100 --> 00:01:49,330
If we return false, we drop it.

38
00:01:49,330 --> 00:01:50,190
And, of course,

39
00:01:50,190 --> 00:01:52,890
therefore we don't wanna hard code true or false,

40
00:01:52,890 --> 00:01:55,600
because that would keep or drop all items.

41
00:01:55,600 --> 00:01:57,887
But instead, we wanna have a condition here,

42
00:01:57,887 --> 00:01:58,880
and the condition here

43
00:01:58,880 --> 00:02:02,713
is that todoItem.id is not equal to todoId.

44
00:02:05,650 --> 00:02:08,479
That means that if a item at which we're looking

45
00:02:08,479 --> 00:02:11,400
has an id that's not equal to this id,

46
00:02:11,400 --> 00:02:13,030
we will return true,

47
00:02:13,030 --> 00:02:15,170
which means we'll keep it.

48
00:02:15,170 --> 00:02:18,970
If we have an item where the id is equal to this id,

49
00:02:18,970 --> 00:02:23,073
this will return false and therefore we will drop it,

50
00:02:24,030 --> 00:02:26,530
and that's exactly what we want to achieve.

51
00:02:26,530 --> 00:02:29,180
And that is all we have to do here.

52
00:02:29,180 --> 00:02:31,750
The rest, again, will be done by Vue.

53
00:02:31,750 --> 00:02:33,720
It will see that todos changed

54
00:02:33,720 --> 00:02:35,310
and therefore update our DOM

55
00:02:35,310 --> 00:02:39,103
in the places where we used todos, like here in this list.

56
00:02:40,090 --> 00:02:42,400
We just have to wire up this delete button

57
00:02:42,400 --> 00:02:45,270
and, again, add a click listener

58
00:02:45,270 --> 00:02:47,570
and point at deleteTodo

59
00:02:47,570 --> 00:02:51,430
and again pass todo.id to deleteTodo.

60
00:02:54,070 --> 00:02:56,033
And that is really all.

61
00:02:57,210 --> 00:02:59,920
With that, if I add a new todo

62
00:03:00,770 --> 00:03:02,340
and a second todo,

63
00:03:03,530 --> 00:03:08,530
and a third todo here,

64
00:03:09,200 --> 00:03:11,500
I can, of course, still edit them.

65
00:03:11,500 --> 00:03:13,840
All these todos can be edited,

66
00:03:13,840 --> 00:03:16,300
but I can also delete the second todo,

67
00:03:16,300 --> 00:03:20,210
and now only a new todo and a third todo is left.

68
00:03:20,210 --> 00:03:22,420
And I can delete all todos,

69
00:03:22,420 --> 00:03:24,723
at which point I see my initial message again.

70
00:03:26,160 --> 00:03:29,520
And that is Vue.js in action.

71
00:03:29,520 --> 00:03:32,360
Now as I said, Vue.js has way more to offer,

72
00:03:32,360 --> 00:03:35,520
and we're not entirely done with this section yet,

73
00:03:35,520 --> 00:03:39,000
but you hopefully see why Vue.js is amazing.

74
00:03:39,000 --> 00:03:40,940
We have some HTML code

75
00:03:40,940 --> 00:03:44,960
which is highly readable and fully declarative.

76
00:03:44,960 --> 00:03:47,300
We express what we wanna have,

77
00:03:47,300 --> 00:03:48,860
that we wanna have list items,

78
00:03:48,860 --> 00:03:51,640
multiple of list items, for our todos,

79
00:03:51,640 --> 00:03:54,260
that we wanna have click listeners and so on.

80
00:03:54,260 --> 00:03:56,810
This is highly understandable.

81
00:03:56,810 --> 00:04:00,050
And we have a little bit of JavaScript code.

82
00:04:00,050 --> 00:04:01,440
If I zoom out quite a bit,

83
00:04:01,440 --> 00:04:03,750
you see it's not that much code.

84
00:04:03,750 --> 00:04:04,970
And most importantly,

85
00:04:04,970 --> 00:04:07,743
it's highly structured and understandable.

86
00:04:08,600 --> 00:04:11,480
Compare that with the other code from before.

87
00:04:11,480 --> 00:04:15,470
That's way more code and way harder to understand.

88
00:04:15,470 --> 00:04:18,610
Sure, there we are sending HTTP requests,

89
00:04:18,610 --> 00:04:20,329
something which is missing here,

90
00:04:20,329 --> 00:04:21,880
but even without that,

91
00:04:21,880 --> 00:04:24,020
this code here would be longer,

92
00:04:24,020 --> 00:04:27,210
and more importantly, it would be more complex.

93
00:04:27,210 --> 00:04:29,770
Creating all these elements manually,

94
00:04:29,770 --> 00:04:32,840
selecting the places where they should be added,

95
00:04:32,840 --> 00:04:34,960
adding event listeners manually.

96
00:04:34,960 --> 00:04:38,590
This is, as mentioned initially, highly error prone

97
00:04:38,590 --> 00:04:40,640
and definitely not how we wanna build

98
00:04:40,640 --> 00:04:42,713
more complex user interfaces.

99
00:04:43,610 --> 00:04:46,420
Instead, building user interfaces like this

100
00:04:46,420 --> 00:04:49,860
is a breeze with Vue or React and Angular,

101
00:04:49,860 --> 00:04:51,580
and that's why you should definitely

102
00:04:51,580 --> 00:04:53,440
have a look at such frameworks

103
00:04:53,440 --> 00:04:56,540
if you are planning to build JavaScript-driven,

104
00:04:56,540 --> 00:04:59,230
front-end web interfaces.

105
00:04:59,230 --> 00:05:00,070
Now with that,

106
00:05:00,070 --> 00:05:03,343
let's also see how we can handle HTTP requests here.