Upon receiving a response from the Zoho API, I am faced with an array structured as follows:
{
"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 specific array of interest in this case is response.result. It is assigned to a variable as shown below:
vm.allDepartments = JSON.parse(data.Payload).response.result
My goal is to populate a dropdown menu where the department ID serves as the value and the Department name is displayed. Given that each department is within an object nested in an array, I believe two v-for loops are necessary. Since there should always be only one object in each array (in the event of multiple objects, I require the first object's Department name), I attempted to achieve this using the following code snippet:
<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>
However, after implementing this code, my dropdown menu does not display any options when viewed on the frontend. Strangely enough, upon inspecting the code, I can see that the options are indeed present.
<select class="form-control" id="__BVID__105_">
<div>
<option value="4076840000001">Department 1</option>
</div>
<div>
<option value="40768400000012">Department 2</option>
</div>
....
This issue could potentially stem from the surrounding div tag enclosing the option tags. Unfortunately, despite being new to Vue.js, I have not been able to find a solution for this problem. Any assistance or guidance would be greatly appreciated.