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.

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.

--

--

--

think&code. Also an occasional G(Foodie)OAT: https://www.instagram.com/anaikoki/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Oh No, He is Back Again: Vue.js + Nuxt.js Rendering Issue.

Javascript map() and reverse() method

JavaScript: Variable declaration and hoisting

Using MongoDB with Mongoose — Buffer, Boolean, ObjectId and Array Types

How to get started hacking django applications

Immutable state in NGXS. Part I.

Developing Vue Apps with the Quasar Library — Masonry Grid

Setup RESTful API with Node.js, Express, MongoDB using TypeScript

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
Anna Ikoki

Anna Ikoki

think&code. Also an occasional G(Foodie)OAT: https://www.instagram.com/anaikoki/

More from Medium

What is 𝗻𝘃𝗺 ❓️ — ⓝⓥⓜ 𝟭𝟬𝟭 in 5 minutes !

Image showing that how nvm — node version manager,  manages multiple versions of node or nodeJS

How to make a website with login from scratch in NodeJS and Mongoose (Advanced)

Build Querystring like a pro

Mother of all JavaScript Array methods. Array.reduce() — Part 1