component.js

'use strict';

export default (Vue) => {
  Vue.component('mm-checkbox', {
    props: {
      value: {
        type: Array,
        default: ''
      },
      valueChecked: {
        type: String,
        default: ''
      },
      name: String,
      id: String,
      placeholder: {
        type: String,
        default: ''
      },
      label: {
        required: true,
        type: String,
      },
    },
    template: `
    <div class="form-group">
    <div class="checkbox">
    <label>
    <input ref="input" type="checkbox" :name="name" :value="valueChecked" :id="id" @change="updateValue($event.target.checked, $event.target.value)"> {{label}}
    </label>
    </div>
    </div>
    `,
    mounted() {
      //
      this.initialValue();
    },
    methods: {
      initialValue() {
        this.$refs.input.value = this.valueChecked;
      },
      updateValue(checked, value) {
        const pos = this.value.indexOf(value);
        const valueInput = (checked) ? this.value.concat(value) : this.value.splice(1, pos);
        
        this.$emit('input', valueInput);
      }
    }
  });
};