Vue using model with custom components

by Roland Doda

HTML

<div id="app">
  <my-checkbox v-model="checked" value="unchanged"></my-checkbox>{{checked}}
</div>

<template id="my_checkbox">
<div>
My value is {{value}} <br>
  <input type="checkbox" :value="value" @change="$emit('change', !checked)">  
  </div>
</template>

CSS

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

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

Vue

Vue.component('my-checkbox', {
	template: '#my_checkbox',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `checked` as the prop which take the place of `value`
    checked: {
      type: Boolean,
      default: false
    }
  },
})

new Vue({
  el: "#app",
  data: {
		checked: null
  },	
})