Instead of solely relying on v-model, you have the option to utilize a click event like this: @click="checkedInput". However, the more sophisticated and streamlined approach is using v-model. If there is a need for additional filtering before selecting a checkbox, you can implement a click event similar to the one below.
let app = new Vue({
el: '#app',
data: {
checkedNames: [],
checkedName: true,
close: false
},
methods: {
uncheck: function(checkedName) {
this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
this.$refs[checkedName.toLowerCase()].checked = false
},
uncheckall: function(event) {
this.checkedNames.forEach(e => this.$refs[e.toLowerCase()].checked = false)
this.checkedNames = [];
},
mouseOver: function() {
this.close = true;
},
mouseOut: function() {
this.close = false;
},
checkedInput(event) {
if (this.checkedNames.includes(event.target.value)) {
this.uncheck(event.target.value)
} else {
this.checkedNames.push(event.target.value)
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id='app'>
<ul class="checkboxes">
<li><input type="checkbox" ref="jack" value="Jack" @click="checkedInput">
<label for="jack">Jack</label></li>
<li><input type="checkbox" ref="john" value="John" @click="checkedInput">
<label for="john">John</label></li>
<li><input type="checkbox" ref="mike" value="Mike" @click="checkedInput">
<label for="mike">Mike</label></li>
</ul>
<br/>
<ul class="tags">
<li @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheck(checkedName)" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
{{ checkedName }}<span v-show="close" aria-hidden="true">×</span>
</li>
<li class="badge badge-pill badge-danger" @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheckall" v-show="checkedNames != ''">Clear</li>
</ul>
</div>