[Vuejs]-Populate <select> <option> using v-for loop in VueJS

by

1👍

✅

Luckily for you, Vue can loop through the properties in an Object as described in v-for with an Object.

I’ve also included a snippet below which should help you achieve what you want.

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: () => {
    return {
      persons: {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="persons">
    <option v-for="(name, id) in persons" :value="id">{{name}}</option>
  </select>
</div>

1👍

You are almost done, just improve that select:

<select id="persons" >
  <option
    v-for="(value, key) in persons"
    :value="key"
    :key="key"
  >{{ value }}</option>
</select>

Leave a comment