Vue.js Simplified - Form Input Binding (#8)

In Part 2 (The Basics) of this series we saw how the v-model directive can be used to create a two way binding between a data property and a form input.

<input type='text' id='answer' v-model='answer'>
<p>Your answer: {{ answer }}</p>

In the above example, we worked with a basic text input.

In this guide, we’ll dig deeper to learn about how v-model works on other input types.

Checkboxes

Toggling the true/falseness of a v-model attribute on a checkbox will:

• Trigger a change event
• Toggle the checked property

Example:

data() {
    return {
        showHint: true,
    }
}

<input type='checkbox' id='showHint' v-model='showHint'>
<label for='showHint'>Show hint?</label>

<div v-if='showHint'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Group of checkboxes

You can also influence a group of related checkboxes by modeling them on an array of values.

For example, given the following checkboxes:

<input type='checkbox' id='greetings' value='greetings' v-model='categories'>
<label for='greetings'>Greetings</label>

<input type='checkbox' id='colors' value='colors' v-model='categories'>
<label for='colors'>Colors</label>

<input type='checkbox' id='verbs' value='verbs' v-model='categories'>
<label for='verbs'>Verbs</label>

If the data for the config data property was ['greetings', 'verbs'], then just those two checkboxes would be selected.

data() {
    return {
        categories: ['greetings', 'verbs']
    }
}

Radios

Because radio buttons are intended to be mutually exclusive, you can bind to a property that has a single value that matches the value attribute of the radio option you wish to be chosen.

Example:

data() {
    return {
        level: 'easy'
    }
}

<input type='radio' id='easy' value='easy' name='level' v-model='level'>
<label for='easy'>Easy</label>

<input type='radio' id='moderate' value='moderate' name='level' v-model='level'>
<label for='moderate'>Moderate</label>

<input type='radio' id='difficult' value='difficult' name='level' v-model='level'>
<label for='difficult'>Difficult</label>

Selects

Binding a property to a select will cause its option with the matching value to be selected.

Example:

data() {
    return {
        level: 'easy'
    }
}

<select v-model='level'>
    <option value='easy'>Easy</option>
    <option value='moderate'>Moderate</option>
    <option value='difficult'>Difficult</option>
</select>

Textareas

You can fill a textarea with a data property using text interpolation:

<textarea>{{ textContent }}</textarea>

However, note that this will only create a one-way binding, so if the user changes the value in the textarea, it will not update the corresponding data property.

Typically, you’d instead want to set up a two-way data binding using v-model:

<textarea v-model='textContent'></textarea>