JSFiddle - React, Tailwind, and code Playground

Vue checkbox component example

by Travis Almand

HTML

<div id="app">
  <p>single checkbox</p>
  <iris-checkbox label="travis" v-model="checkbox"></iris-checkbox>
  
  <p>multiple checkboxes</p>
  <iris-checkbox label="option one" v-model="checkboxes.one"></iris-checkbox>
  <iris-checkbox label="option two" v-model="checkboxes.two"></iris-checkbox>
  <iris-checkbox label="option three" v-model="checkboxes.three"></iris-checkbox>
  
  <button @click="onClick">show state</button>
</div>

CSS

label {
  display: block;
  margin: 5px 0;
}

JavaScript

console.clear();

Vue.component('iris-checkbox', {
  template: `
  	<label class="iris-checkbox">
    	<input type="checkbox" :checked="value" @change="onInput" />
      <span>{{ label }}</span>
    </label>`,
  props: {
    value: Boolean,
    label: String
  },
  methods: {
  	onInput(event) {
    	this.$emit('input', event.target.checked);
    }
  }
});

new Vue({
  el: "#app",
  data: function () {
  	return {
    	checkbox: true,
      checkboxes: {
      	one: false,
        two: true,
        three: false
      }
    }
  },
  methods: {
  	onClick: function() {
    	console.log(`checkbox: ${this.checkbox} | checkboxes: ${this.checkboxes.one}, ${this.checkboxes.two}, ${this.checkboxes.three}`);
    }
  }
});