¿Cómo puedo hacer un contenedor para cada casilla de verificación seleccionada?
Cuando se selecciona una casilla de verificación, aparece un contenedor con su valor dentro
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>Prueba como el siguiente fragmento:
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>