JSFiddle - React, Tailwind, and code Playground

by Mladen Mihajlovic

HTML

<div id="vue">
<checkbox v-model="stuff" value="woot"></checkbox>
<checkbox v-model="stuff" value="hello"></checkbox>
<checkbox v-model="stuff" value="test"></checkbox>
{{stuff}}
<hr>
<checkbox v-model="bool"></checkbox>{{bool || 'false'}}
</div>

JavaScript

new Vue({
	el:'#vue',
  data:{
  stuff:['hello'],
  bool:false
  },
  components:{
  	checkbox:{
    	props:['checked','value'],
      model: {
        prop: 'checked',
        event: 'input'
      },
    	template:`
      	<button v-if="Array.isArray(checked)" @click="click">{{checked.includes(value) ? 'X' : 'O'}}</button>
        <button v-else @click="$emit('input', !checked)">{{checked ? 'X' : 'O'}}</button>
        `,
      methods:{
      	click(){
        	if(this.checked.includes(this.value)){
          	this.checked.splice(this.checked.indexOf(this.value), 1)
          } else {
          	this.checked.push(this.value)
          }
        }
      }
    }
  }
})