If you want to update the model value when clicking on the outer pill element, you can add an event listener for it. This may not directly forward the event, but it will achieve the same result by toggling the checkbox.
<span class="checkbox-span"
v-for="token_obj in token_to_vue_obj"
v-on:click="token_obj.show = !token_obj.show; plot()">
Edit (check comments): It is recommended to remove plot() from the change handler of the <input> element to avoid calling the function twice when clicking the checkbox.
Take a look at the code snippet below.
var app = new Vue({
el: '.token-checkboxes',
methods: {
plot() {
console.log('Plot called!');
}
},
data: {
token_to_vue_obj: [
{ token: '_#misc', show: true },
{ token: '_#study', show: true },
{ token: '_#code', show: true },
{ token: '_#debug', show: true },
{ token: '_data', show: false }
]
}
})
.checkbox-span {
background-color: lightgrey;
padding: 0.5em;
border-radius: 0.5em;
border: 2px solid black;
margin: 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="token-checkboxes">
<span class="checkbox-span"
v-for="token_obj in token_to_vue_obj"
v-on:click="token_obj.show = !token_obj.show;plot()"
v-bind:key="token_obj.token">
<input type="checkbox" class="checkbox" v-model="token_obj.show">
<label for="checkbox">{{ token_obj.token }}</label>
</span>
</div>
Edit: Make sure to address the issue mentioned in the comment below regarding the non-unique id="checkbox".