Vue3 Fetch getting data but not populating dropdown fields. What am I doing wrong?

I have created a company to try to download incident data from the North Carolina determine the transportation so that I can put it on a map. However, while it is downloading the data (418 records), it is not splitting it up into the appropriate sections so that it can be rendered in the select/option drop downs. I am not sure why this is not happening. I've been noodling on this for at least an hour and I just have not been getting any luck regardless of asking ChaT GPT, and doing a lot of look on Stack Overflow, etc.

INPUT: https://eapps.ncdot.gov/services/traffic-prod/v1/incidents
EXPECTED OUTPUT: Dropdowns populated with data
ACTUAL: Dropdowns but no data, however call resuls in 418 records, so?

Anyone have any insights? Much appreciated.

    <template>
<div>
<div>to wit: {{ dropdownData }}</div>
<select v-model="reason">
<option v-for="r in dropdownData.reasons" :value="r">{{ r }}</option>
</select>
<select v-model="condition">
<option v-for="c in dropdownData.conditions" :value="c">{{ c }}</option>
</select>
<select v-model="incidentType">
<option v-for="type in dropdownData.incidentTypes" :value="type">{{ type }}</option>
</select>
<button @click="getData">Get Data</button>
</div>
</template>
<script>
export default {
data() {
return {
reason: null,
condition: null,
incidentType: null,
dropdownData: {
reasons: [],
conditions: [],
incidentTypes: []
}
}
},
mounted() {
this.fetchDropdownData()
},
methods: {
fetchDropdownData() {
// actual API: https://eapps.ncdot.gov/services/traffic-prod/v1/incidents?verbose=true
fetch(`${import.meta.env.VITE_API_VERBOSE}`)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
})
.then((data) => {
// Create a new reactive object using Vue.set or spread operator
this.dropdownData = {
reasons: [...data.reasons],
conditions: [...data.conditions],
incidentTypes: [...data.incidentTypes]
}
})
.catch((error) => {
// Handle error
console.error('Error:', error)
})
},
getData() {
// Make use of the selected values: this.reason, this.condition, this.incidentType
// Perform further operations or API calls based on the selected values
}
}
}
</script>

Codepen: https://codepen.io/MaxRocket/pen/wvYVKJY

Thoughts?

Here are a few suggestions from Cody, but I don't think they apply, except maybe #7, but I thought I'd share them anyway.

There are a few possible reasons the select options may not be populating:

1. The dropdownData object is empty. If the API call to populate the
   data has not completed or failed, dropdownData will be empty and no options will render.

2. The v-for directive is iterating over an empty array. If
   dropdownData.reasons, dropdownData.conditions, or
   dropdownData.incidentTypes are empty arrays, no options will be
   rendered.

3. There is a syntax error in the template preventing it from
   compiling. Double check that all v-for directives, v-models, etc.
   have correct syntax.

4. The data function is not returning the dropdownData object. Make
   sure data() returns dropdownData, and that it is not undefined.

5. There is an error in the mounted lifecycle hook preventing the API
   call from completing. Check the network tab to see if the API call
   is failing, and double check for any errors in the mounted function.

6. The select element has a v-model but no value set for the options.
   For a v-model to work, each must have a value attribute set.

7. The component is not actually using the dropdownData data. Make sure
   v-for is iterating over dropdownData, and v-model is using the data
   from dropdownData.

The problem is this code

reasons: [...data.reasons],
conditions: [...data.conditions],
incidentTypes: [...data.incidentTypes]

Your data returns an array of item, in each item has properties like reason, condition and incidentType. You should create an array base on that items. For example

 reasons: data.map(el => el.reason),
conditions: data.map(el => el.condition),
ncidentTypes: data.map(el =>el.incidentType)

I have tried the following in your codepen:

getData() {
      // Make use of the selected values: this.reason, this.condition, this.incidentType
      // Perform further operations or API calls based on the selected values
      const testData = { reasons: ['reason1, reason2'], conditions: ['condition1, condition2'], incidentTypes: ['incidentTypes1, incidentTypes2'] }
      // Create a new reactive object using Vue.set or spread operator
      this.dropdownData = {
        reasons: [...testData.reasons],
        conditions: [...testData.conditions],
        incidentTypes: [...testData.incidentTypes]
      }
    }

Then, when I click the button for Get Data, it works like a charm.

Can you provide us with the results of console.log('data: ', data); ? It might be an issue with the results you receive from the call.