• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

127
Views
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: {{ checkedNames }}</span>

</div>

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error