[Vuejs]-Vue3 Fetch getting data but not populating dropdown fields. :( What am I doing wrong?

by

4👍

✅

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)
👤Tony

1👍

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.

👤Vitomir

Leave a comment