1
00:00:02,430 --> 00:00:05,020
So now we're able to save and fetch todos,

2
00:00:05,020 --> 00:00:08,630
of course, the edit and delete capabilities are missing,

3
00:00:08,630 --> 00:00:13,130
at least the capabilities to send those requests.

4
00:00:13,130 --> 00:00:15,820
And I wanna continue with editing.

5
00:00:15,820 --> 00:00:20,820
For this, in todos.js, we have this updateTodo function

6
00:00:20,950 --> 00:00:23,120
and in there in the end,

7
00:00:23,120 --> 00:00:28,120
we have this code for sending our request.

8
00:00:28,580 --> 00:00:31,530
And again, I wanna copy all that request code from todos.js

9
00:00:32,920 --> 00:00:35,783
and then go to app.js and use it there.

10
00:00:37,210 --> 00:00:39,770
Now there, I wanna use it in methods,

11
00:00:39,770 --> 00:00:42,110
so I'll unfold that,

12
00:00:42,110 --> 00:00:44,120
and there in saveToDo,

13
00:00:44,120 --> 00:00:47,520
this time in this first branch of this if statement,

14
00:00:47,520 --> 00:00:50,160
which is our updating branch.

15
00:00:50,160 --> 00:00:53,810
There, we still get that todoId, which we'll need,

16
00:00:53,810 --> 00:00:58,420
but then before we update any data in our todos array,

17
00:00:58,420 --> 00:01:00,740
I wanna send this request.

18
00:01:00,740 --> 00:01:02,687
And therefore, of course,

19
00:01:02,687 --> 00:01:06,000
saveTodo needs to be an async method since we use await,

20
00:01:06,000 --> 00:01:07,660
but it already was async

21
00:01:07,660 --> 00:01:10,773
because of the code we added before for storing todos.

22
00:01:12,470 --> 00:01:15,850
So now here again, I sent this patch request.

23
00:01:15,850 --> 00:01:18,050
And in there, I sent the newTodoText,

24
00:01:18,050 --> 00:01:19,700
which of course now is wrong.

25
00:01:19,700 --> 00:01:24,320
This should be the enteredTodoText from our data like this,

26
00:01:24,320 --> 00:01:26,773
just as we did it for saving a new to do.

27
00:01:28,650 --> 00:01:29,860
It's a patch request.

28
00:01:29,860 --> 00:01:34,860
The todoId here is part of the path of the URL.

29
00:01:35,350 --> 00:01:38,900
Then we have this basic error handling here.

30
00:01:38,900 --> 00:01:41,970
And then of course, I still wanna update my to do's.

31
00:01:41,970 --> 00:01:43,740
This code doesn't change.

32
00:01:43,740 --> 00:01:47,040
And with that, I mean the todos in my todos array.

33
00:01:47,040 --> 00:01:50,740
And the updating logic also doesn't need to change

34
00:01:50,740 --> 00:01:52,790
because the idea hasn't changed

35
00:01:52,790 --> 00:01:56,220
and the text is still the entered text.

36
00:01:56,220 --> 00:02:00,100
So therefore, this should be all that has to be added.

37
00:02:00,100 --> 00:02:02,250
And with that, if we save this,

38
00:02:02,250 --> 00:02:07,060
we can load this and still execute this as before.

39
00:02:07,060 --> 00:02:08,810
But now if I reload the page,

40
00:02:08,810 --> 00:02:11,850
you see the updated data stays there.

41
00:02:11,850 --> 00:02:15,980
So also if I add updated here to make this very clear

42
00:02:15,980 --> 00:02:19,320
which todo changed, it's updated instantly on the DOM.

43
00:02:19,320 --> 00:02:22,590
But if I reload, we fetch it again from the database

44
00:02:22,590 --> 00:02:25,340
and we therefore see it really was changed there

45
00:02:25,340 --> 00:02:29,083
because we still see this change in the newly fetched data.

46
00:02:30,770 --> 00:02:33,260
So updating really isn't too difficult

47
00:02:33,260 --> 00:02:36,350
and the same is true for deleting data.

48
00:02:36,350 --> 00:02:40,180
So there we can go to deleteTodo in todos.js

49
00:02:40,180 --> 00:02:44,473
and then grab this code for sending this request like that.

50
00:02:45,650 --> 00:02:50,280
And then in app.js, we can go to this deleteTodo method,

51
00:02:50,280 --> 00:02:54,433
which we have here, and keep this code for updating the DOM,

52
00:02:55,390 --> 00:02:58,713
but also add this code for sending a request.

53
00:03:00,360 --> 00:03:02,410
And actually, we can move that code

54
00:03:02,410 --> 00:03:05,880
after the code where we update our data

55
00:03:05,880 --> 00:03:08,840
because I'm fine with updating the data in the DOM

56
00:03:08,840 --> 00:03:11,420
even before the request was sent

57
00:03:11,420 --> 00:03:15,200
because this will ensure that the UI is updated instantly

58
00:03:15,200 --> 00:03:17,370
and we then send the request to the API

59
00:03:17,370 --> 00:03:19,180
kind of behind the scenes

60
00:03:19,180 --> 00:03:21,380
because we don't need to wait for the response

61
00:03:21,380 --> 00:03:24,100
of this request to update the UI.

62
00:03:24,100 --> 00:03:26,950
We can immediately delete the todo there

63
00:03:26,950 --> 00:03:29,463
and then just send the request thereafter.

64
00:03:30,810 --> 00:03:33,983
Since I'm using await, we still need to add async here.

65
00:03:34,870 --> 00:03:37,570
And then again, we need the todoId,

66
00:03:37,570 --> 00:03:41,990
which we get here as a parameter value, so we have that.

67
00:03:41,990 --> 00:03:43,880
And it's then this delete request.

68
00:03:43,880 --> 00:03:47,110
And well, then I have this error handling here,

69
00:03:47,110 --> 00:03:50,100
but I update the UI first.

70
00:03:50,100 --> 00:03:51,300
And we could have done the same

71
00:03:51,300 --> 00:03:53,250
for updating a todo by the way.

72
00:03:53,250 --> 00:03:55,790
There, we could have also taken this code

73
00:03:55,790 --> 00:04:00,330
for updating the UI even before we send our request.

74
00:04:00,330 --> 00:04:01,653
This code, I mean.

75
00:04:02,880 --> 00:04:05,280
We could grab all of that here

76
00:04:06,540 --> 00:04:10,580
and move that in front of our request code like this

77
00:04:11,550 --> 00:04:13,130
and it would still work.

78
00:04:13,130 --> 00:04:16,480
Now we just send this please update this request

79
00:04:16,480 --> 00:04:18,390
to the API behind the scenes

80
00:04:18,390 --> 00:04:21,050
after the DOM was already updated,

81
00:04:21,050 --> 00:04:24,920
and this will provide an even quicker feedback to our users.

82
00:04:24,920 --> 00:04:27,220
So now if I update, this still works.

83
00:04:27,220 --> 00:04:28,070
And if I reload,

84
00:04:28,070 --> 00:04:31,330
we still get that updated data from the database,

85
00:04:31,330 --> 00:04:34,350
so the request was sent correctly,

86
00:04:34,350 --> 00:04:36,550
but we update immediately.

87
00:04:36,550 --> 00:04:38,260
And the same is true for deleting.

88
00:04:38,260 --> 00:04:40,660
I deleted from the UI immediately.

89
00:04:40,660 --> 00:04:42,490
And if I reload, it stays deleted

90
00:04:42,490 --> 00:04:46,200
because I did successfully send that deletion request

91
00:04:46,200 --> 00:04:48,070
behind the scenes.

92
00:04:48,070 --> 00:04:51,990
And I also have no errors here in the console.

93
00:04:51,990 --> 00:04:54,150
So that all works.

94
00:04:54,150 --> 00:04:57,410
And that is how we can send HTTP requests

95
00:04:57,410 --> 00:05:00,803
from inside our Vue.js application or code.

96
00:05:01,640 --> 00:05:04,550
Of course, because of all that request code,

97
00:05:04,550 --> 00:05:08,470
the code in this file in app.js grew quite a bit,

98
00:05:08,470 --> 00:05:11,280
but still, even though it's now more code,

99
00:05:11,280 --> 00:05:13,860
it's really maintainable code,

100
00:05:13,860 --> 00:05:15,930
and we still don't have to take care

101
00:05:15,930 --> 00:05:19,810
about the nitty-gritty details of keeping the DOM updated,

102
00:05:19,810 --> 00:05:22,010
which can be very error-prone

103
00:05:22,010 --> 00:05:26,040
the more complex your UI and logic gets.

104
00:05:26,040 --> 00:05:29,620
And of course, you could also add more JavaScript files

105
00:05:29,620 --> 00:05:33,600
and outsource certain features into our files.

106
00:05:33,600 --> 00:05:35,670
That is something you could do.

107
00:05:35,670 --> 00:05:38,690
And that, of course, would allow you to split your code

108
00:05:38,690 --> 00:05:41,870
so that it stays more maintainable.

109
00:05:41,870 --> 00:05:45,010
Now that is absolutely something I also dive in

110
00:05:45,010 --> 00:05:46,430
in my Vue.js course

111
00:05:46,430 --> 00:05:50,260
or in my deep dive JavaScript the complete guide course

112
00:05:50,260 --> 00:05:52,110
where you learn way more

113
00:05:52,110 --> 00:05:55,030
and everything you need to know about JavaScript,

114
00:05:55,030 --> 00:05:57,630
but for this introduction to Vue.js

115
00:05:57,630 --> 00:06:01,030
and for giving you all that key web development knowledge,

116
00:06:01,030 --> 00:06:03,900
this approach here is absolutely fine.

117
00:06:03,900 --> 00:06:07,220
And you're now able to not just build user interfaces

118
00:06:07,220 --> 00:06:10,810
with just HTML, CSS, and JavaScript,

119
00:06:10,810 --> 00:06:13,770
but you can also build more powerful user interfaces

120
00:06:13,770 --> 00:06:16,020
with a lot of interactivity in them

121
00:06:16,020 --> 00:06:19,373
with help of JavaScript frameworks like Vue.js.