Dropdown component - not making any api call when render form

[dhimiterbundo]

I add a dropdown control with rest request pointing to my local api http://localhost:3000/dropdown-values and on form render it throw this error vue.runtime.esm.js?2b0e:1888 TypeError: [Dropdown] Rest-API Endpoint must be valid http/https URL.

[sethsandaru]

Hello @dhimiterbundo ,

Please provide the configuration of the dropdown datasource. Also the result-data of your API. Thanks

[dhimiterbundo]

hello @sethsandaru this is the dropdown configuration:

        "control-ba824229-0571-4eff-b51c-19e7005764f0": {
          "uniqueId": "control-ba824229-0571-4eff-b51c-19e7005764f0",
          "type": "dropDown",
          "name": "",
          "label": "Dropdown",
          "subLabel": "",
          "isShowLabel": true,
          "placeholderText": "",
          "containerClass": "col-md-4",
          "additionalContainerClass": "",
          "additionalFieldClass": "",
          "additionalLabelClass": "",
          "defaultValue": "",
          "validations": [],
          "dataMode": "api",
          "multiple": false,
          "items": [],
          "apiURL": "http://localhost:3000/dropdown-values",
          "apiTextKey": "label",
          "apiValueKey": "value"
        }
      },

And this is the response from api call:

[
  {
    "value": "option 1",
    "label": "1"
  },
  {
    "value": "option 2",
    "label": "2"
  },
  {
    "value": "option 3",
    "label": "3"
  },
  {
    "value": "option 4",
    "label": "4"
  },
  {
    "value": "option 5",
    "label": "5"
  },
  {
    "value": "option 6",
    "label": "6"
  }
]

[sethsandaru]

Hello @dhimiterbundo ,

Thanks for the full detail. I'll look into this!

[sethsandaru]

Okay, 100% is a bug from the logic that I made. More detail here:

https://github.com/sethsandaru/vue-form-builder/commit/f2a0301e19eb42ca106a6499dce30c4f2e68b64b#diff-9fc44001afef0c8e62cb509fec58429bL85-L88

The fixes will come up soon, it will be on @2.0.1. Thanks. I'll let you know when it's released.

[abhimanusharma]

@sethsandaru Trying to make api request to 3rd party api https://support.travelpayouts.com/hc/en-us/articles/203956163-Travel-insights-with-Travelpayouts-Data-API#data_of_city

In form config: Value Key of your Object : name Text Key of your Object : name

Getting error:

Access to fetch at 'http://api.travelpayouts.com/data/en/cities.json?token=7ef5867b5c424588c63ac72fd48f1221' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Along with:

TypeError: Cannot read property 'containerClass' of undefined

and

Invalid prop: type check failed for prop "control". Expected Object, got Undefined

and

app.js:146148 [DROPDOWN-Control-control-a84467ce-7bcd-47de-b3fa-ee637f2d23a9] Request API to get data failed. TypeError: Failed to fetch