Uncheck CheckBox with its label in VueJS
Pass the checkedName as argument to the method and filter the array instead of assigning a variable.
First, add checkedName argument to uncheck:
<li @click="uncheck(checkedName)" ... v-for="checkedName in checkedNames">And then use that argument to remove that name from the checkedNames array:
this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
Demo below.
new Vue({ el: '#app', data: { checkedNames: [], checkedName: true }, methods: { uncheck: function(checkedName) { this.checkedNames = this.checkedNames.filter(name => name !== checkedName); //this.checkedName = !this.checkedName; } }})li.badge.badge-primary { cursor: pointer; margin: 5px; font-size: 100%;}ul.checkboxes { list-style: none;}ul.tags { margin-top: -110px; margin-left: 85px;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='app'> <ul class="checkboxes"> <li><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label></li> <li><input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label></li> <li><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label></li> </ul> <br/> <ul class="tags"> <li @click="uncheck(checkedName)" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames"> {{ checkedName }} </li> </ul></div>