Implementing v-model simplifies the process. Here is an updated solution with some restructuring:
new Vue({
el: '#app',
data: () => ({ checkedNames: [], close: false }),
methods: {
uncheck(checkedName) { this.checkedNames = this.checkedNames.filter(name => name !== checkedName); },
uncheckall() { this.checkedNames = []; },
mouseOver() { this.close = true; },
mouseOut() { this.close = false; }
}
})
<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" 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
v-for="(checkedName, checkedNameId) in checkedNames"
:key="checkedNameId"
@mouseover="mouseOver"
@mouseleave="mouseOut"
@click="uncheck(checkedName)"
class="badge badge-pill badge-primary"
>
{{ 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.length"
>
Clear
</li>
</ul>
</div>
MODIFICATION:
If you prefer not to opt for the previous solution, your current method faces a challenge as the array checkedNames lacks two-way binding with the inputs, leading to unreflected changes on the template. To tackle this, preload it and utilize v-for to display checkboxes that can adjust the checked attribute of each item. Additionally, generate labels below by creating a computed property listing the selected items:
new Vue({
el: '#app',
data: () => ({ checkedNames: [ { id:1, name:"Jack", checked:false }, { id:2, name:"John", checked:false }, { id:3, name:"Mike", checked:false } ], close: false }),
computed: {
checkedLabels() { return this.checkedNames.filter(({ checked }) => checked === true); }
},
methods: {
uncheckall() { this.checkedNames.forEach(item => item.checked=false); },
mouseOver() { this.close = true; },
mouseOut() { this.close = false; },
checkedInput(checkId) {
const item = this.checkedNames.find(({ id }) => id === checkId);
item.checked = !item.checked;
}
}
})
<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
v-for="({ id, name, checked }) in checkedNames"
:key="id"
>
<input
type="checkbox"
:id="name"
:value="name"
:checked="checked"
@click="checkedInput(id)"
>
<label :for="name">{{name}}</label>
</li>
</ul>
<br>
<ul class="tags">
<li
v-for="({ id, name}) in checkedLabels"
:key="id"
@mouseover="mouseOver"
@mouseleave="mouseOut"
@click="checkedInput(id)"
class="badge badge-pill badge-primary"
>
{{ name }}<span v-show="close" aria-hidden="true">×</span>
</li>
<li
class="badge badge-pill badge-danger"
@mouseover="mouseOver"
@mouseleave="mouseOut"
@click="uncheckall"
v-show="checkedLabels.length"
>Clear</li>
</ul>
</div>