Categories
JavaScript Vue

How to Add a Checkbox to a Vuejs App

Spread the love

We can add a checkbox control to a Vuejs app by adding a regular HTML checkbox control.

Then we can add the v-model directive to it to bind the checked value to a model variable.

For instance, we can write the following:

App.vue

<template>
  <div id="app">
    <input type="checkbox" v-model="checkValue">checkbox
    <p>{{checkValue}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      checkValue: false
    };
  }
};
</script>

In the code above, we added a checkbox to the model with the v-model directive.

The directive binds the checked value to the checkValue property.

We also have the p element below it to display the value.

Then when we click it, we toggle the checkValue model’s value between true and false.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *