In the previous tutorial, we discussed conditionals using v-if. In this tutorial, we are expected to gain knowledge in two-way binding and handling user input at the same time. Two way binding means changing any data that is reflecting to a model i.e. when an application data changes, same goes on user interface or vice versa.
Let’s get our hands dirty, this tutorial is very easy and straightforward. First, we need to create a text input where a user can type their email and another input to confirm email.
Notice that we have included a v-model with the same value in both text input. Now to prove that two way binding facet of Vue is a reflection of data changes, let us try it in our view. Type your email in the first input and see what will happen.
Exactly! The value in our first text input reflects directly to the second input. Now to confirm and validate that both inputs are equal, we are going to set an event that validates their equality. To do this, we need to create a new button and insert a v-on:click function which will trigger the below method;
Now refresh your page and see if it really validates both email.