Make a container for each selected checkbox in VueJS

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>

Answer

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>

Advertisement

Answer