1
00:00:02,290 --> 00:00:04,320
So now we know how we can use Vue

2
00:00:04,320 --> 00:00:07,130
to output data and how we can use Vue

3
00:00:07,130 --> 00:00:10,883
to react to user events like the submission of a form.

4
00:00:12,090 --> 00:00:14,790
Now, we want to get the real data that was entered

5
00:00:14,790 --> 00:00:17,060
by the user and use that for updating

6
00:00:17,060 --> 00:00:19,343
our to do data up there.

7
00:00:21,210 --> 00:00:23,470
And for this, we can leverage another feature

8
00:00:23,470 --> 00:00:27,160
provided by Vue called two way binding.

9
00:00:27,160 --> 00:00:29,200
And for that, let's go back to app JS

10
00:00:29,200 --> 00:00:33,250
and let's add a new data piece to this data object.

11
00:00:33,250 --> 00:00:35,370
By the way, data can be anything.

12
00:00:35,370 --> 00:00:37,430
It can be a string, a number,

13
00:00:37,430 --> 00:00:40,300
or also nested objects or arrays.

14
00:00:40,300 --> 00:00:43,250
And later we will work with an array there as well.

15
00:00:43,250 --> 00:00:44,993
I just already want to mention it.

16
00:00:46,390 --> 00:00:51,070
Now here, we could add an enter to do text value,

17
00:00:51,070 --> 00:00:54,570
which is an empty string initially, let's say,

18
00:00:54,570 --> 00:00:56,720
and here in safe to do,

19
00:00:56,720 --> 00:01:00,850
I now want to assume that entered to do text actually

20
00:01:00,850 --> 00:01:04,772
contains the text entered by the user into this input.

21
00:01:06,010 --> 00:01:07,120
Now the offer here,

22
00:01:07,120 --> 00:01:10,150
since I assume that it will contain that entered text,

23
00:01:10,150 --> 00:01:13,110
I can set this new to-do equal to

24
00:01:14,010 --> 00:01:16,483
this entered to do text.

25
00:01:17,850 --> 00:01:20,570
Now, of course, the part where this does contain

26
00:01:20,570 --> 00:01:23,870
the enter data is still missing though.

27
00:01:23,870 --> 00:01:26,690
But again, it's nothing we'll take care about here

28
00:01:26,690 --> 00:01:28,530
in the JavaScript code. Instead

29
00:01:28,530 --> 00:01:32,480
we'll take care about that declaratively in the HTML code

30
00:01:33,400 --> 00:01:37,880
here, its this input which we want to connect

31
00:01:37,880 --> 00:01:41,453
to this data field here to the entered, to do text.

32
00:01:43,190 --> 00:01:46,723
This can be done with a feature called two way binding.

33
00:01:47,590 --> 00:01:49,570
We don't need a name for that.

34
00:01:49,570 --> 00:01:52,410
We can keep it here, but we don't need it.

35
00:01:52,410 --> 00:01:55,640
Instead here we can add another special attribute

36
00:01:55,640 --> 00:01:58,830
which is named V dash model.

37
00:01:58,830 --> 00:02:02,460
All attributes starting with V dash are special Vue

38
00:02:02,460 --> 00:02:06,910
attributes and so are these at attributes

39
00:02:06,910 --> 00:02:11,183
and V model as a value wants a piece of data.

40
00:02:12,050 --> 00:02:16,890
So, in my case entered to do text, the name of that data

41
00:02:16,890 --> 00:02:20,780
property which should be connected to this input

42
00:02:20,780 --> 00:02:23,690
because that is what V model will do.

43
00:02:23,690 --> 00:02:27,380
It will connect an input or any form element

44
00:02:27,380 --> 00:02:32,380
including selects and check boxes and so on with a piece of

45
00:02:32,410 --> 00:02:37,030
data in your data method in your Vue app object.

46
00:02:37,030 --> 00:02:41,140
And what V model does behind the scenes is it will listen to

47
00:02:41,140 --> 00:02:46,140
every keystroke in that input and update the data stored in

48
00:02:46,170 --> 00:02:49,560
entered to do text with every keystroke.

49
00:02:49,560 --> 00:02:52,320
And actually it's called two way binding,

50
00:02:52,320 --> 00:02:55,900
because if you would have another place in your Vue app

51
00:02:55,900 --> 00:02:58,690
that would update entered to do text

52
00:02:58,690 --> 00:03:02,220
this latest value would be reflected back into

53
00:03:02,220 --> 00:03:06,550
input to show this I can give this a starting value of

54
00:03:06,550 --> 00:03:09,730
let's say new to do

55
00:03:09,730 --> 00:03:12,400
here for entered to do text.

56
00:03:12,400 --> 00:03:15,380
And if I save everything you'll notice that this is

57
00:03:15,380 --> 00:03:19,940
prefilled into this input here because it's two way binding.

58
00:03:19,940 --> 00:03:23,340
When we now type here that will be stored back into

59
00:03:23,340 --> 00:03:27,960
entered to do text but if we set this to an initial value

60
00:03:27,960 --> 00:03:31,030
as we're doing it here or if we would be changing it

61
00:03:31,030 --> 00:03:33,610
from some other place in code that would be

62
00:03:33,610 --> 00:03:35,723
written back into this input as well.

63
00:03:37,050 --> 00:03:39,700
Now here, however I'll set it back to an empty string

64
00:03:40,890 --> 00:03:43,540
with that we got an empty string initially

65
00:03:43,540 --> 00:03:48,360
but if I now enter a new to do here and click save

66
00:03:48,360 --> 00:03:51,160
you'll see that content up here.

67
00:03:51,160 --> 00:03:53,750
And you see it here because in save to do.

68
00:03:53,750 --> 00:03:58,140
I set this new to-do equal to this entered to do text.

69
00:03:58,140 --> 00:04:00,470
And as I just mentioned every keystroke

70
00:04:00,470 --> 00:04:03,370
will be stored in there and then when I set

71
00:04:03,370 --> 00:04:06,810
this new to do equal to this all the places where

72
00:04:06,810 --> 00:04:08,880
new to do as being used in our HTML

73
00:04:08,880 --> 00:04:11,943
code will be updated with that new value.

74
00:04:13,417 --> 00:04:16,300
And now we can also use the two way binding nature

75
00:04:16,300 --> 00:04:19,577
of V model to thereafter clear this input

76
00:04:19,577 --> 00:04:24,480
Once we click save by simply setting this entered to do text

77
00:04:24,480 --> 00:04:28,740
back to an empty string after we got and used its value

78
00:04:30,684 --> 00:04:35,380
and with that if I reload I can add on you to do

79
00:04:35,380 --> 00:04:38,090
and if I click save it was updated here

80
00:04:38,090 --> 00:04:41,193
and the input was set back to an empty input.

81
00:04:42,320 --> 00:04:45,470
So that is two way binding which is set up

82
00:04:45,470 --> 00:04:48,160
with help of V model and you typically use it

83
00:04:48,160 --> 00:04:52,204
on form input elements no matter which kind of element it is

84
00:04:52,204 --> 00:04:56,250
to get the entered value and to possibly change

85
00:04:56,250 --> 00:04:59,400
the value shown on the screen after you handled

86
00:04:59,400 --> 00:05:02,100
the entered value or whatever you wanted

87
00:05:02,100 --> 00:05:02,933
to do with it