Kendo vue dropdownlist binding updating but not showing on UI

[ravi]

SAMPLE https://stackblitz.com/edit/usjgwp?file=index.html
I want to show a number of kendo dropdownlist(s) on a page. The exact number depends on an API call. This API call will give me an array of objects. The objects have the following properties: Id, name, type, role and isSelected.
The number of dropdownlist that has to be shown on this page should be equal to the number of unique type values in the API response array. i.e, numberOfDropdowns = stakeholders.map(a => a.type).distinct().count().
Now, each dropdown will have a datasource based on the type property. i.e, For a dropdown for type = 1, dataSource will be stakeholders.filter(s => s.type == 1).
Also the default values in the dropdowns will be based on the isSelected property. For every type, only one object will have isSelected = true.
I have achieved these things by using the following code:

01.<template>
02.  <div
03.    v-if="selectedStakeholders.length > 0"
04.    v-for="(stakeholderLabel, index) in stakeholderLabels"
05.    :key="stakeholderLabel.Key"
06.  >
07.    <label>{{ stakeholderLabel.Value }}:</label>
08.    <kendo-dropdownlist
09.      v-model="selectedStakeholders[index].Id"
10.      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
11.      data-text-field="name"
12.      data-value-field="Id"
13.    ></kendo-dropdownlist>
14.
15.    <button @click="updateStakeholders">Update form</button>
16.  </div>
17.</template>
18.
19.<script>
20.import STAKEHOLDER_SERVICE from "somePath";
21.export default {
22.  name: "someName",
23.  props: {
24.    value1: String,
25.    value2: String,
26.  },
27.  data() {
28.    return {
29.      payload: {
30.        value1: this.value1,
31.        value2: this.value2
32.      },
33.      stakeholders: [],
34.      selectedStakeholders: [],
35.      stakeholderLabels: [] // [{Key: 1, Value: "Stakeholder1"}, {Key: 2, Value: "Stakeholder2"}, ... ]
36.    };
37.  },
38.  mounted: async function() {
39.    await this.setStakeholderLabels();
40.    await this.setStakeholderDataSource();
41.    this.setSelectedStakeholdersArray();
42.  },
43.  methods: {
44.    async setStakeholderLabels() {
45.      let kvPairs = await STAKEHOLDER_SERVICE.getStakeholderLabels();
46.      kvPairs = kvPairs.sort((kv1, kv2) => (kv1.Key > kv2.Key ? 1 : -1));
47.      kvPairs.forEach(kvPair => this.stakeholderLabels.push(kvPair));
48.        },
49.    async setStakeholderDataSource() {
50.      this.stakeholders = await STAKEHOLDER_SERVICE.getStakeholders(
51.        this.payload
52.      );
53.    }
54.    setSelectedStakeholdersArray() {
55.      const selectedStakeholders = this.stakeholders
56.        .filter(s => s.isSelected === true)
57.                .sort((s1, s2) => (s1.type > s2.type ? 1 : -1));
58.
59.      selectedStakeholders.forEach(selectedStakeholder =>
60.        this.selectedStakeholders.push(selectedStakeholder)
61.      );
62.    },
63.    async updateStakeholders() {
64.      console.log(this.selectedStakeholders);
65.    }
66.  }
67.};
68.</script>

The problem is that I am not able to change the selection in the dropdownlist the selection always remains the same as the default selected values. Even when I choose a different option in any dropdownlist, the selection does not actually change.
I've also tried binding like this:

<kendo-dropdownlist
      v-model="selectedStakeholders[index]"
            value-primitive="false"
      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
      data-text-field="name"
      data-value-field="Id"
    ></kendo-dropdownlist>

 

If I bind like this, I am able to change selection but then the default selection does not happen, the first option is always the selection option i.e, default selection is not based on the isSelectedproperty.
My requirement is that I have to show the dropdown with some default selections, allow the user to choose different options in all the different dropdowns and then retrieve all the selection then the update button is clicked.
UPDATE: When I use the first method for binding, The Id property of objects in the selectedStakeholders array is actually changing, but it does not reflect on the UI, i.e, on the UI, the selected option is always the default option even when user changes selection. Also when I subscribe to the change and select events, I see that only select event is being triggered, change event never triggers.

[Ianko]

Hello Ravi,

The reason for all those problems is that the implemented code attempts to pass objects as selected values, but the model is bound via the value field of the object. That contradicts with Vue paradigms and principles. You should rather bind the models to a primitive array with only strings or numbers. And then use computed properties and watchers to manipulate data and return the array of selected objects. Here you are a possible solution: 

https://stackblitz.com/edit/usjgwp-wdubzj?file=index.js

Regards,
Ianko
Progress Telerik