Home / Web Design / JavaScript / 2-Way Data Binding with v-model

2-Way Data Binding with v-model

VueJs is a small, flexible JavaScript library that allows developers to build interactive web applications quite easily through an API that is simple and easy to pick up. It shares some similarities and a number of differences with other libraries/frameworks like Angular, React, Ember, Polymer, and Riot to name a few. However Vue prides itself on it’s simplicity, performance, flexibility and being less opinionated. The VueJs website has a more in depth comparison with other libraries and frameworks which you can read about here, if you’re interested.

This tutorial aims to give you an overview of some of the basic concepts and features through practical examples. In future tutorials we’ll be looking at more advanced features and building scalable applications with Vue.

2-Way Data Binding with v-model

To illustrate the 2-way data binding feature of Vue, we will create a simple HTML text input with the v-model directive that will be used to dynamically update the greeting property in the data object.

You can think of the v-model directive as any other HTML attribute. It creates 2-way data bindings on form input elements such as <input>, <textarea>, and <select>. The value of the v-model directive is the data we wish to update on user input events. For this particular example, we are binding the <input> element to the greeting string that we have created in the Vue data object as shown below:

...

<div id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter a greeting: <input type="text" v-model="greeting">
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<script>
  // our VueJs instance bound to the div with an id of vue-instance
  var vm = new Vue({
    el: '#vue-instance',
    data: {
      greeting: 'Hello VueJs!'
    }
  });
</script>

...

Now any time a user input event fires on the text box, the greeting string will be updated automatically and if the greeting string is changed, then the text box will also be automatically updated to reflect those changes. This constant synchronization between form input elements and underlying data is achieved using the v-model attribute and it is also where the 2-way data binding notion arises.

To prove this 2 way data binding between the <input> element and the underlying greeting string, we can dump the data object of this Vue instance to the page using the special $data property between double curly braces which essentially tells Vue to replace whatever is between those curly braces {{ }} with the property in the corresponding data object.

...

<div id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter a greeting: <input type="text" v-model="greeting">
    <pre>{{ $data | json }}</pre>
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<script>
  // our VueJs instance bound to the div with an id of vue-instance
  var vm = new Vue({
    el: '#vue-instance',
    data: {
      greeting: 'Hello VueJs!'
    }
  });
</script>

...

Go ahead and try it out here!

The | json in {{ $data | json }} is just a helper method (or a filter in Vue-terms) to pretty print the $data object. All it really does is call JSON.stringify() under the hood.

In a similar manner, you can display only the greeting string from the data object using the double curly braces like so:

...

<div id="vue-instance">
  <!-- this will be the DOM element we will mount our VueJs instance to -->
  Enter a greeting: <input type="text" v-model="greeting">
    <p>{{ greeting }}</p>
</div>

...

Vue makes this sort of data binding really easy as you can see. You don’t need to write any input event handlers in pure Javascript or JQuery, all it took was a single v-model directive to bind the input element to underlying data. If we look at the code as a whole, we can really appreciate how much Vue abstracts away and simplifies event handling logic:

...
<body>

<div id="vue-instance">
    Enter a greeting: <input type="text" v-model="greeting">
    <p>{{ greeting }}</p>
</div>

<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#vue-instance',
        data: {
            greeting: 'Hello VueJs!'
        }
    });
</script>

</body>
...

About Yesaya R. Athuman

Colleagues know me as a highly Creative Software Developer who can always be trusted to come up with the new approach. But I know that client's business come first, and I never try to impose my ideas on others. Instead, I spend a lot of time understanding business and the audience before suggesting ideas. I can (and often do) work well alone, but I'm at my best collaborating with others.

Check Also

Take Your CSS Experience to the Next Level with SASS

Take Your CSS Experience to the Next Level with SASS

Beginners or those who have taken a break from web design for a few years …