The Vue Model or v-model can be used for basic two-way data binding of form input. You can alter data on the frontend in form data and if will be altered in the backend at the same time. And this with very simple syntax. So when a customer enters data in a contact form, survey form, or quotation form and so on he or she can get instant feedback.

Two Way Binding

So what is two way binding in the JavaScript world?  Well we found a sweet and short explanation at SO. Two-way-data-binding is:

• When properties in the model get updated, so does the UI.
• When UI elements get updated, the changes get propagated back to the model.

This can be achieved with vanilla JavaScript too of course. This you can do with an eventListener and a function for proper implementation. However, this requires a lot of extra coding and lots of JavaScript frameworks like VueJS make this way easier to achieve.

Vue Model Example

Here an example of two-way-data binding using a basic form field. You will see v-model with a name added to the input form:

<input type="text" name="input" v-model="message">

and a message added as data to the script below with moustache braces:

<p>The value of the input is {{message}}</p>

Below the html you see the JavaScript part with the data the new Vue instance loads and boot to the element #root using el. As you can see we now use the IE6 let local scope variable:

let data = {
 message: 'Hello World'
 };

Save the example below and run it in your browser.

https://gist.github.com/jasperf/63f7cce8c50b8573b9179c0cff560722

You will see that when you alter the content / text in the form it will change next to it as well. This is happening as we connected the form data to that text block using two-way-binding with v-model.

Vue Two Way Data Binding Magic

So what is so cool about this? Well it allows you to give your visitor immediate feedback on form changes made in the browser. Any update made can be shown. It also makes sure that the data in data is the only source of truth. Dealing with data it is always important to have one place to go to for your data. The other great thing about v-model like a lot of VueJS syntax is that is is very simple to implement.

V-Model Application

You can use v-model form form fields and text areas. For other form data such as checkboxes, radio boxes the html syntax is slightly different as is the VueJS syntax, but the v-model can used here as well. Won’t be adding an example for it here. No worries though as for all v-model implementations you can find short and sweet examples on Vuejs.org.