Vue Two-way binding using v-model

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.

v-model

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.

v-model

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;

v-model

Now refresh your page and see if it really validates both email.

v-model

See that it validates that both inputs are equal as it triggered the alert. Good job on your first two way binding tutorial! Keep it up on the next chapter where we will discuss Vue components.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.