Vue JS — Two Way Data Binding — Vue from the TOP
Welcome back to a simple yet elaborate series on Vue JS called as Vue From the TOP. Yup, if you have been following this series you know we discussed data binding in the previous post, and you might have also remembered I promised to talk about two-way data binding in the next post. So here I am as promised talking about two-way data binding. Let’s begin.
Missed the series? : Check it out on:
Two Way Data Binding
In super simple terms two-way data binding is nothing but making a connection reactive in both ways. Not simple enough? Alright. Let’s look at it with an example.
You know how in show business, they say “Show, Don’t Tell”. Well in the blog business I have to both show and tell. Well, I already told you what it is .. ( sort of ) so let me try and show you.
Btw, just a quick note, you remember how we use v-bind for data binding, here for two way data binding we use v-model.
To better understand what is two-way data binding and why is it useful, we will look into an example. This example is to display the difference between one way data binding and two-way data binding.
As always, let's spin up a Vue project and let’s have two headings and two input fields.
Also, let's add a data property to store a string.
Great, now for one input field let’s use one-way data binding ( v-bind ). For another input field, let's use two-way data binding ( v-model ). And let’s bind both the input fields to the same data property. Let’s also add a heading displaying the data property.
Now, with all these in place, let me explain why we did all that. For one-way data binding, we bind the data to a particular attribute. So whatever changes we make to the data property gets reflected onto the attributes, but whatever changes we make to the attributes will not get reflected onto the data property.
Whereas for two-way data binding, it gets reflected both ways, i,e whenever we change the value of the data property, it gets reflected the attributes and whatever changes that happen to the attributes gets reflected back to the data property.
Now the first input data property is one way bound to the data property name. So any changes in the data property name will reflect onto the input field. But whatever changes you make in the input field will not get reflected onto the name. Play around in the sandbox below to understand the difference more clearly.
You can notice that the changes done in the second input field are reflected throughout the component but the changes done in the first field are not.
This is the difference between one way data binding and two-way data binding.
And that’s it for this post, I know its super short, I really wanted to explain it in as simple terms as possible. Hope you had fun if you did please don't forget to clap for this article — helps out a lot.
Support
If you loved this article, please consider checking out my complete Vue JS Fundamentals Course for Beginners on Cynohub.
https://cynohub.com/courses/vue-js-fundamentals-course/
Thanks. See ya Next Time.
