JSFiddle - React, Tailwind, and code Playground

by Zaiste

HTML

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

<div id="app">
  <ol>
    <li>
      <my-checkbox val="checkbox 1" v-model="componentSelectedItems">Component Checkbox 1</my-checkbox>
    </li>
    <li>
      <my-checkbox val="checkbox 2" v-model="componentSelectedItems">Component Checkbox 2</my-checkbox>
    </li>
  </ol>

  <strong>Selected components</strong> {{componentSelectedItems}}

  <ol>
    <li>
      <label>
        <input type="checkbox" name="native" value="checkbox 1" v-model="nativeSelectedItems" />
        Native Checkbox 1
      </label>
    </li>

    <li>
      <label>
        <input type="checkbox" name="native" value="checkbox 2" v-model="nativeSelectedItems" />
        Native Checkbox 2
      </label>
    </li>
  </ol>

  <strong>Selected native:</strong> {{nativeSelectedItems}}

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

strong {
  font-weight: bold
}

Vue

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

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