[Vuejs]-Loop through a complex object of array in vue to get a particular field populated in dropdown

by

1👍

✅

Your dropdown options array is response.data.payload.result.entry not response.data.

Working Demo :

new Vue({
    el: '#app',
    template: `
        <div>
            <select v-model="selectedEntry">
                <option v-for="entry in payload.result.entry" :value="entry['@id']">{{entry['@location']}}</option>
            </select>
            <h4>Selected Entry: {{selectedEntry}}</div>
        </div>
    `,
    data: {
        payload: {
            result: {
            entry: [{
              "@id":"abc123",
              "@location":"vcfa"
            }, {
                "@id":"ftef",
              "@location":"562532"
            }]
          }
        },
        selectedEntry: ""
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

0👍

You are setting this.groupOptions to the object you’re getting. You need to parse the object and get the array you want to loop through.

created() {
   axios.get("api/getGroups").then((response) => {
     this.groupOptions= response.data.payload.result.entry
     console.log("groups", this.groupOptions);
  }).catch(error => {
     ...
  })
}

Since this.groupOptions is now the array of objects, you can set the value equal to the @id field. Since the property name has a special character, you have to use bracket notation to access it.

<bc-dropdown label="Dropdown object"  v-model="form.location" @select="setGroup">
  <bc-dropdown-option v-for="g in groupOptions"  :key="g['@id']"  :value="g['@id']" />
</bc-dropdown>

Leave a comment