How can I make a container for each selected checkbox?
When a check box is selected, a container appears with its value inside
new Vue({
el: '#vue-container',
data: {
checkedNames: []
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='vue-container'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>Try like following snippet:
new Vue({
el: '#vue-container',
data: {
checkedNames: []
}
})ul {
display: flex;
list-style: none;
align-items: center;
}
li {
padding: 2px 8px;
margin: 5px;
border: 1px solid grey;
border-radius: 1em;
background: #66FF99;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='vue-container'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<ul>
<span>Checked names:</span>
<li v-for="name in checkedNames" :key="name">
{{ name }}
</li>
</ul>
</div>