Vue Checkbox Wrap

by Ariel Alvarez

HTML

<div id="app">
    <h5>Simple</h5>
    <v-check v-model="current"></v-check>
    {{ current }}
    <h5>Array</h5>
    <v-check value="cat" v-model="choices"></v-check>
    <v-check value="fish" v-model="choices"></v-check>
    {{ choices }}
</div>

Vue

Vue.component("v-check", {
	template: `	
		<input type="checkbox" :value="value" v-model="proxyChecked" />
  `,
  model: {
  	prop: "checked",
    event: "change"
  },
  props: {
  	checked: {
    	type: [Array, Boolean],
      	default: false
    },
    value: {
    	default: null
    }
  },
  computed: {
    proxyChecked: {
      get() {
		  return this.checked;
      },
      set(val) {
		this.$emit("change", val);
      }
    }
  }
});


new Vue({
  el: "#app",
  data: {
    current: false,
    choices: ["cat", "dog", "fish"] 
  }
});