Populate a nested array in a dropdown in Vue.js

Question

I have an array get as a response from zoho API like this.

    {
    "response": {
        "result": [{
            "4076840000001": [{
                "Department": "Department 1",
                "Department_Lead.ID": "4076840000001"
                 ...
            }]
        }, {
            "40768400000012": [{
                "Department": "Department 2",
                "Department_Lead.ID": "40768400000011",
                ....
            }]
        }, {
            "407684000000125": [{
                "Department": "Department 3",
                "Department_Lead.ID": "40768400000011233",
                ....
            }]
        }],
        "message": "Data fetched successfully",
        "uri": "/api/forms/department/getRecords",
        "status": 0
    }
}

The array I'm refering is actually response.result. I assign it to a variable like,

vm.allDepartments = JSON.parse(data.Payload).response.result

I want to populate this into a dropdown so that the id will be the value and the Department will be displayed in the dropdown. In order to display this I need two v-fors since the department itself is an object within an array. But I guess there will be always one object in those arrays (if there are multiple, I still need the first objects' Department name.) I tried to accomplish my goal like this;

   <select v-model="department">
        <div v-for="department in allDepartments">
          <option
            v-for="(value, key) in department"
            :value="key">{{value[0]['Department']}}</option>
        </div>
    </select>

With this, my dropdown does not show anything (any option). But when I inspect the code I could see it.

<select class="form-control" id="__BVID__105_">
    <div>
        <option value="4076840000001">Department 1</option>
    </div>
    <div>
        <option value="40768400000012">Department 2</option>
    </div>
    ....

I believe that this behaviour is due to the div around the option tag. But I can't seem to find a way to do that. This might be a simple thing, but I'm new to vue.js and I can't find any similar question in StackOverflow. Any help would be appreciated.

Bert · Accepted Answer · 2017-11-30 02:36:36Z

Use template instead of div.

<select v-model="department">
  <template v-for="department in allDepartments">
    <option v-for="(value, key) in department"
            :value="key">{{value[0]['Department']}}</option>
  </template>
</select>

console.clear()

const response = {
  "response": {
    "result": [{
      "4076840000001": [{
        "Department": "Department 1",
        "Department_Lead.ID": "4076840000001"
      }]
    }, {
      "40768400000012": [{
        "Department": "Department 2",
        "Department_Lead.ID": "40768400000011",
      }]
    }, {
      "407684000000125": [{
        "Department": "Department 3",
        "Department_Lead.ID": "40768400000011233",
      }]
    }],
    "message": "Data fetched successfully",
    "uri": "/api/forms/department/getRecords",
    "status": 0
  }
}

new Vue({
  el: "#app",
  data:{
    department: null,
    allDepartments: response.response.result
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
  <select v-model="department">
    <template v-for="department in allDepartments">
      <option v-for="(value, key) in department"
              :value="key">{{value[0]['Department']}}</option>
    </template>
  </select>
  <hr>
  {{department}}
</div>

The template element is typically used when you need to create some sort of grouping and don't actually want to render an element, but rather only what is inside it. In Vue it's perfect for loops like this.

It's working! Thanks a lot!. Didn't have any idea about using template in such cases.

Collectives™ on Stack Overflow

Populate a nested array in a dropdown in Vue.js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related