Vue.js Simplified - Form Input Binding (#8) - Code with Susan
← 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.


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

  • Trigger a change event
  • Toggle the checked property


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.

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']


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.


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>


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


data() {
    return {
        level: 'easy'
<select v-model='level'>
    <option value='easy'>Easy</option>
    <option value='moderate'>Moderate</option>
    <option value='difficult'>Difficult</option>


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 you have questions or any issues when running through the above notes, post a comment on the video on YouTube. I monitor all my comments and will do my best to respond promptly.

← Other topics