How to loop checkbox for each value in dropdown list in vuejs?

Question

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>

Basically i have a dropdown, where i can able to select list of cities available based on the state. So, Once i get the cities, i should be able to select multiple of them and display the number of selected cities.(by placing checkboxes for each value from city dropdown list, and display the number of selected cities)

Codesandbox link working

Checkboxes inside selects is not valid html so you're going to have problems. What UI/UX are you trying to achieve? — bassxzero
– bassxzero, Commented Oct 11, 2021 at 4:49
@bassxzero i want to achieve like, Once i get the cities from the dropdown liat, i should be able to select multiple of them and display the number of selected cities. — T dhanunjay
– T dhanunjay, Commented Oct 11, 2021 at 5:26
This is my codesandbox link codesandbox.io/s/xenodochial-bush-yxfc8?file=/src/App.vue — T dhanunjay
– T dhanunjay, Commented Oct 11, 2021 at 5:27
@bassxzero if possible can you please provide some code, on how to use it. — T dhanunjay
– T dhanunjay, Commented Oct 11, 2021 at 5:52

Nikola Pavicevic · Accepted Answer · 2021-10-11 09:07:39Z

1

One way:

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>

edited Oct 11, 2021 at 9:07

answered Oct 11, 2021 at 7:17

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T dhanunjay Over a year ago

Hi, I have already done this, but only issue is i was unable to place checkbox for each list available in dropdown.

Collectives™ on Stack Overflow

How to loop checkbox for each value in dropdown list in vuejs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related