So now we know how we can use Vue
to output data and how we can use Vue
to react to user events like the submission of a form.
Now, we want to get the real data that was entered
by the user and use that for updating
our to do data up there.
And for this, we can leverage another feature
provided by Vue called two way binding.
And for that, let's go back to app JS
and let's add a new data piece to this data object.
By the way, data can be anything.
It can be a string, a number,
or also nested objects or arrays.
And later we will work with an array there as well.
I just already want to mention it.
Now here, we could add an enter to do text value,
which is an empty string initially, let's say,
and here in safe to do,
I now want to assume that entered to do text actually
contains the text entered by the user into this input.
Now the offer here,
since I assume that it will contain that entered text,
I can set this new to-do equal to
this entered to do text.
Now, of course, the part where this does contain
the enter data is still missing though.
But again, it's nothing we'll take care about here
in the JavaScript code. Instead
we'll take care about that declaratively in the HTML code
here, its this input which we want to connect
to this data field here to the entered, to do text.
This can be done with a feature called two way binding.
We don't need a name for that.
We can keep it here, but we don't need it.
Instead here we can add another special attribute
which is named V dash model.
All attributes starting with V dash are special Vue
attributes and so are these at attributes
and V model as a value wants a piece of data.
So, in my case entered to do text, the name of that data
property which should be connected to this input
because that is what V model will do.
It will connect an input or any form element
including selects and check boxes and so on with a piece of
data in your data method in your Vue app object.
And what V model does behind the scenes is it will listen to
every keystroke in that input and update the data stored in
entered to do text with every keystroke.
And actually it's called two way binding,
because if you would have another place in your Vue app
that would update entered to do text
this latest value would be reflected back into
input to show this I can give this a starting value of
let's say new to do
here for entered to do text.
And if I save everything you'll notice that this is
prefilled into this input here because it's two way binding.
When we now type here that will be stored back into
entered to do text but if we set this to an initial value
as we're doing it here or if we would be changing it
from some other place in code that would be
written back into this input as well.
Now here, however I'll set it back to an empty string
with that we got an empty string initially
but if I now enter a new to do here and click save
you'll see that content up here.
And you see it here because in save to do.
I set this new to-do equal to this entered to do text.
And as I just mentioned every keystroke
will be stored in there and then when I set
this new to do equal to this all the places where
new to do as being used in our HTML
code will be updated with that new value.
And now we can also use the two way binding nature
of V model to thereafter clear this input
Once we click save by simply setting this entered to do text
back to an empty string after we got and used its value
and with that if I reload I can add on you to do
and if I click save it was updated here
and the input was set back to an empty input.
So that is two way binding which is set up
with help of V model and you typically use it
on form input elements no matter which kind of element it is
to get the entered value and to possibly change
the value shown on the screen after you handled
the entered value or whatever you wanted
to do with it