← Other topics

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

Series contents:

Video Notes

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.

As you go through this information, observe how Vue facilitates a data-focussed and declarative code style. When binding values to different input types (radio, checkbox, select, etc.), Vue allows us to focus on the data while it handles the unique mechanics of working with each different input type.

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>
If this info helped you out, toss a coin in the tip jar?
← Other topics