Vue JS — Two Way Data Binding — Vue from the TOP

Vamshi Krishna
Sep 18, 2019 · 3 min read
Image for post
Image for post

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 like these articles and if you would love to see more, please consider supporting me via skillshare or buying me a coffee. ☕️

Ko-Fi — Ko-fi.com/ionicvue

Thanks. See ya Next Time.

My Point of Vue

Everything Regarding Vue JS and its counterparts.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store