mercredi 13 octobre 2021

Make a container for each selected checkbox in VueJS

How can I make a container for each selected checkbox?

like in this image

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: </span>

</div>



Aucun commentaire:

Enregistrer un commentaire