JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div>
<my-checkbox v-for="myval in values" v-bind:value="myval" v-model="componentSelectedItems" >Component {{myval}}</my-checkbox>
component selected items: {{componentSelectedItems}}
</div>
</div>
JavaScript
Vue.component('my-checkbox', {
template: '<div><label><input type="checkbox" :value="val" v-model="checked" @change="onChange" /><slot></slot></label></div>',
props: ['value', 'val'],
data () {
return {
checkedProxy: false
}
},
computed: {
checked: {
get () {
return this.value
},
set (val) {
this.checkedProxy = val
}
}
},
methods: {
onChange: function(e) {
this.$emit('input', this.checkedProxy)
}
}
})
new Vue({
el: '#app',
data: {
values: ['aser','assas'],
componentSelectedItems: [],
nativeSelectedItems: []
}
})