JSFiddle - React, Tailwind, and code Playground

by Robert Kern

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <my-checkbox val="foo" v-model="componentSelectedItems">Component Foo</my-checkbox>
    <my-checkbox val="bar" v-model="componentSelectedItems">Component Bar</my-checkbox>
    component selected items: {{componentSelectedItems}}
  </div>
  <br /><br />
  <div>
    <div><label><input type="checkbox" name="native" value="foo" v-model="nativeSelectedItems" />Native Foo</label></div>
    <div><label><input type="checkbox" name="native" value="bar" v-model="nativeSelectedItems" />Native Bar</label></div>
    native selected items: {{nativeSelectedItems}}
  </div>
</div>

JavaScript

Vue.component('my-checkbox', {
  template: '<div><label><input type="checkbox" :value="val" v-model="checked" @change="onChange" /><slot></slot></label></div>',
  props: ['value', 'val'],
  data () {
    return {
      checkedProxy: false
    }
  },
  computed: {
	  checked: {
      get () {
        return this.value
      },
      set (val) {
        this.checkedProxy = val
      }
    }
  },
  methods: {
    onChange: function(e) {
      this.$emit('input', this.checkedProxy)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    componentSelectedItems: [],
    nativeSelectedItems: []
  }
})