Vue

by oktaviardi pratama

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>

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);
}

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"] 
  }
});