How to use v-model for data binding in Vuejs

Objective: You will understand how to bind form data to a data object in Vuejs.

Data binding can consist of displaying the data (from source) to the User Interface (the destination) as the display soon as it changes its value. There are various types of data binding.

When it comes to forms, data binding usually involves the form elements, the UI, the backend (server), and sometimes up to the database.

Binding

If you want a specific data-binding explanation, you might want to take a look at the ones listed down below. Or simply, just skip to the form data-binding in Vuejs explained at the end of this article.

• What is data binding in HTML? Read about that here.
• What is data binding in Javascript? Read about that here and here
• What is data binding in Knockoutjs? Read about that here
• What is data binding in Reactjs? Read about that here
• What is data binding in Angularjs? Read about that here and here

Data binding in Vuejs

Using a v-model, the will be a two-way data binding of an object’s property with an event. And also, between the (Input) Model and the UI (View).

Binding form data to an object in Vuejs using a v-model Vuejs directive creates a two-way synchronization of data from the form input elements of say component NewName.vue and event listener eg click.

The input value will be bound to an object as such on the UI:

<form> 
...
<input type="text" v-model="objectName.propertyName">
...
</form>

Here is the data object to bind the form data to:

export default {
  data() {
    return {
      objectName: {
        "propertyName": ""
      }
    }
  }
}

Our form component will have to listen to a click event from a button, using a click with a method event handler addName

<button type="button" @click="addName">Add</button>

The method capturing the input value after the click event is listed as the second object after the data object.

export default {
  data() {
    return {
      objectName: {
        "propertyName": "Enter your name here"
      }
    }
  },
 methods: {
   addName() {
     console.log(this.objectName)
   }
 }
}

And that’s how you can bind a form data to an object in Vuejs. Play with fiddle here.