- Learn by example
Make an RPG
Vue Implementations

Example of how to use Vue v-model

v-model lets you access form values from your javascript.

Use this.mine in the Vue component to access your input tag:

<input type='text' v-model='mine'></input>

Place the following code in the javascript and run it. In the input box, type in a word and click the submit button.

window.onload = function() { Vue.component('text-input', { template: `<div> <input type='text' v-model='mine'></input> <button @click='submit'>SUBMIT</button> </div>`, data: function() { return { mine: '' }; }, methods: { submit: function() { alert(this.mine ); } } }); var app = new Vue({ el: '#demo' }); }
Try adding input form elements with various v-model names and alert their values.

v-model allows for 2 way binding. Which means, you can type into the input box and this.mine will change. And, you can change this.mine and the input box will change.

After the alert statement, do: this.mine = 'Hi' and see what happens.

v-model is syntactic sugar for the following:

<input type="text" v-bind:value="mine" @input="mine = $">

There are two parts to that. v-bind:value statement sets value equal to whatever is in the mine variable. The @input statement says, execute this code whenever the input changes. We'll be covering more about the @ event in the next tutorial.

V-model with objects

You can also add a dot operator to create objects. For example, you can do mine.hp. But, make sure to change both the v-model="mine.hp" and the javascript call to mine.hp. Try the following changes.

data: function() { return { mine: { hp: 0 } }; }
<input type="text" v-model="mine.hp"></input>

Binding to Checkboxes

A checkbox will either be true or false.

This example shows how a set of checkboxes with the same v-model can be bound to a single array, which will put the contents of their value property in the array if checked.

Vue.component('text-input', { template: `<div> <p>List of Colors: {{colors.join(', ')}}</p> <label> <input type='checkbox' value='Red' v-model='colors'/> Red </label> <label> <input type='checkbox' value='Blue' v-model='colors'/> Blue </label> <label> <input type='checkbox' value='Green' v-model='colors'/> Green </label> </div>`, data: function() { return { colors: [] }; } });

Binding to Radio boxes

Radio buttons can only have 1 value per grouping, so you should make the color variable a String

window.onload = function() { Vue.component('text-input', { template: `<div> <p>The color is: {{color}}</p> <label> <input type='radio' value='Red' v-model='color'/> Red </label> <label> <input type='radio' value='Blue' v-model='color'/> Blue </label> </div>`, data: function() { return { color: '' }; } }); var app = new Vue({ el: '#demo' }); }

V-model modifiers


Now, let's typcast the input to a number type by using .number.

var app = new Vue({ el: '#demo', data: { mynum: 0 });
<div id='demo'> <input v-model.number='mynum'> </div>

Go ahead and run it. The .number modifier on v-model tells it to parse the input as a number and typecast it to a number. If it can't parse it as a float, then it'll just return it as is.

Enter 82.3asdf and notice how it parses it in the output right next to it.


The .lazy modifier only syncs changes to the data model when an on change event fires, for example: when you tab out.

var app = new Vue({ el: '#demo', data: { mynum: 0 });
<div id='demo'> <input v-model.lazy='mynum'> </div>

Go ahead and try typing into the input box. You'll notice that changes won't appear to the right, until a change event fires, such as when you tab out.


This Trim example will remove all the whitespace surrounding your input.

<input v-model.trim='mystr'> '{{ mystr }}'

In the next lesson, we will learn about Example of Vue Event handling in a component

Get the Latest Tutorial Updates
<< >>