data() { return { selected: [], } watch: { selected(val) { this.$emit("checked", val); }, }, <div class="dropdown"> <span>State:</span> <select :disabled="listCities.length == 0" v-model="selectedCity"> <option value="">Select a City</option> <option v-for="(city, index) in listCities" :key="index" :value="city.city_name"> {{ city.city_name }} //<input type="checkbox" :id="index" :value="city.city_name" v-model="selected" /> </option> </select> </div>¿Cómo hacer un bucle en la casilla de verificación para cada valor en la lista desplegable en vuejs?
Básicamente, tengo un menú desplegable, donde puedo seleccionar una lista de ciudades disponibles según el estado. Entonces, una vez que obtenga las ciudades, debería poder seleccionar varias de ellas y mostrar la cantidad de ciudades seleccionadas (colocando casillas de verificación para cada valor de la lista desplegable de ciudades y mostrando la cantidad de ciudades seleccionadas)
De una sola mano:
new Vue({ el: '#demo', data() { return { listCities: [{city_name: 'name 1'}, {city_name: 'name 2'}, {city_name: 'name 3'}, {city_name: 'name 4'}, {city_name: 'name 5'}, {city_name: 'name 6'}], selectedCity: [] } }, methods: { selectCity(city) { this.selectedCity.includes(city) ? this.selectedCity = this.selectedCity.filter(s => s !== city) : this.selectedCity.push(city) }, } }) Vue.config.productionTip = false Vue.config.devtools = false .city__list { list-style: none; height: 50px; width: 150px; overflow: auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo" class="dropdown"> <span>Cities:</span> <ul class="city__list"> <li v-for="(city, index) in listCities" :key="index" > <input id="chk" type="checkbox" :value="city.city_name" @click="selectCity(city.city_name)" /> {{ city.city_name }} </li> </ul> <span>Selected Cities:</span> <p>{{ selectedCity }}</p> </div>