Sometimes, we want to set a checkbox as checked with Vue.js.

In this article, we’ll look at how to set a checkbox as checked with Vue.js.

How to set a checkbox as checked with Vue.js?

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.

For instance, we write

<template>
  <div>
    <input type="checkbox" v-model="checked" checked />
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      checked: true,
    };
  },
  //...
};
</script>

to add the checked attribute to make the checkbox input checked by default.

Also, we set v-model to checked to bind the check value after we manipulate the checkbox.

Conclusion

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.