Ufdjrw

I have a kendo-dropdownlist component that gets it's data from an API call. I had implemented this using the kendo-datasource component and everything worked fine.
But I now have multiple kendo-dropdownlist components and instead of making an API call for every kendo-dropdownlist component, I am supposed to make only one API call and all the kendo-dropdownlist components should get it's data from the same JSON response. This kendo-dropdownlist is bound to a property called "currentData".

So what I am doing now is that I am declaring a kendo-dropdownlist component but not giving it any data-source-ref. Instead I am setting it's data-source attribute to a local data property called "source" which is an array of JSON.

Then in the mount life-cycle hook, I am making an API call and setting the response to the "source" data property. After this, the dropdown-items get populated in the kendo-dropdownlist but the "currentData" is not selected.

Component template:

<kendo-dropdownlist
 v-model="currentData"
 :data-source="source.filter(s => s.type == 'something')"
 data-text-field="name"
 data-value-field="Id"
 ></kendo-dropdownlist>

Component script:

export default 
 name: "SomeComponent",
 props: 
 prop1: String
 ,
 data() 
 return 
 currentData: this.prop1
 source: []
 ;
 ,
 mounted: async function() 
 await this.setDataSource();
 ,
 methods: 
 async setDataSource() 
 const formDTO = await SERVICE.getDataSource();
 this.source= formDTO.stakeholders;
 
 
;

I can confirm that one of the objects in the sources array has it's Id property equal to this.prop1 .

I can see in your mounted lifecycle hook, you have called setDataSource function. but you missed the reference to that function.

It should be called if you use

await this.setDataSource()

instead of

await setDataSource()

You can click on the any of the data and corresponding data is visible under <p></p> tag.

UPDATED StackBlitz Link:
Here is the working Stackblitz

Hope this helps!