[Vuejs]-Looping through array of object in Vuejs for HTML select tag

by

3👍

✅

new Vue({
  el: '#app',
  data() {
    return {
        options: [
            {
                doctor: 'Doctor',
                engineer: 'Engineer',
                teacher: 'Teacher',
                other: 'Other'
            }
        ]
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select name="occupation">
    <option v-for="(option, index) in options[0]" :value="index">{{ option }}</option>
  </select>
</div>

4👍

You have to use v-for to iterate the items inside of your options

<select name="occupation">
    <option :value="name" v-for="(value, name) in options[0]" >{{value}}</option>
</select>

If your options contain only one element I prefer to just do it like this

options: {
       doctor: 'Doctor',
       engineer: 'Engineer',
       teacher: 'Teacher',
       other: 'Other'
 }

now you could call it like this below

<select name="occupation">
    <option :value="name" v-for="(value, name) in options" >{{value}}</option>
</select>

to know more list rendering please read this docs source

0👍

<select name="occupation">
    <option v-for="(value, key) in options[0]" v-bind: value="key">{{ value }}</option>
</select>

Leave a comment