将Kendo vue下拉列表绑定到对象数组

Question

样品https://stackblitz.com/edit/usjgwp?file=index.html

我想在页面上显示一些kendo dropdownlist（s）。确切的数量取决于API调用。这个API调用将为我提供一系列的利益相关者对象。利益相关者对象具有以下属性：Id，名称，类型，角色和isSelected。

必须在此页面上显示的dropdownlist的数量应等于API响应数组中唯一的type值的数量。即，numberOfDropdowns = stakeholders.map(a => a.type).distinct().count()。

现在，每个下拉列表都有一个基于datasource属性的type。即，对于type = 1的下拉列表，dataSource将是stakeholders.filter(s => s.type == 1)。

下拉列表中的默认值也将基于isSelected属性。对于每个type，只有一个对象将有isSelected = true。

我通过使用以下代码实现了这些功能：

<template>
  <div
    v-if="selectedStakeholders.length > 0"
    v-for="(stakeholderLabel, index) in stakeholderLabels"
    :key="stakeholderLabel.Key"
  >
    <label>{{ stakeholderLabel.Value }}:</label>
    <kendo-dropdownlist
      v-model="selectedStakeholders[index].Id"
      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
      data-text-field="name"
      data-value-field="Id"
    ></kendo-dropdownlist>

    <button @click="updateStakeholders">Update form</button>
  </div>
</template>

<script>
import STAKEHOLDER_SERVICE from "somePath";
export default {
  name: "someName",
  props: {
    value1: String,
    value2: String,    
  },
  data() {
    return {
      payload: {
        value1: this.value1,
        value2: this.value2
      },
      stakeholders: [],
      selectedStakeholders: [],
      stakeholderLabels: [] // [{Key: 1, Value: "Stakeholder1"}, {Key: 2, Value: "Stakeholder2"}, ... ]
    };
  },
  mounted: async function() {
    await this.setStakeholderLabels();
    await this.setStakeholderDataSource();
    this.setSelectedStakeholdersArray();
  },
  methods: {   
    async setStakeholderLabels() {
      let kvPairs = await STAKEHOLDER_SERVICE.getStakeholderLabels();
      kvPairs = kvPairs.sort((kv1, kv2) => (kv1.Key > kv2.Key ? 1 : -1));
      kvPairs.forEach(kvPair => this.stakeholderLabels.push(kvPair));
        },
    async setStakeholderDataSource() {
      this.stakeholders = await STAKEHOLDER_SERVICE.getStakeholders(
        this.payload
      );
    }
    setSelectedStakeholdersArray() {
      const selectedStakeholders = this.stakeholders
        .filter(s => s.isSelected === true)
                .sort((s1, s2) => (s1.type > s2.type ? 1 : -1));

      selectedStakeholders.forEach(selectedStakeholder =>
        this.selectedStakeholders.push(selectedStakeholder)
      );      
    },
    async updateStakeholders() {
      console.log(this.selectedStakeholders);
    }
  }
};
</script>

问题是我无法更改dropdownlist中的选择，选择始终保持与默认选定值相同。即使我在任何dropdownlist中选择不同的选项，选择也不会实际改变。

我也试过像这样的绑定：

<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>

如果我这样绑定，我可以更改选择但是默认选择不会发生，第一个选项始终是选择选项，即默认选择不基于isSelected属性。

我的要求是我必须使用一些默认选项显示dropdown，允许用户在所有不同的下拉列表中选择不同的选项，然后检索所有选择，然后单击更新按钮。

更新：当我使用第一种方法进行绑定时，Id数组中对象的selectedStakeholders属性实际上正在发生变化，但它没有反映在UI上，即在UI上，即使用户，所选选项也始终是默认选项改变选择。此外，当我订阅change和select事件时，我看到只触发了select事件，更改事件永远不会触发。

Answer 1

事实证明这是一个Vue.js限制（或者vue继承的JS限制），Link

我必须显式更改selectedStakeholders数组中的值，如下所示：

<template>
  <div
    v-if="selectedStakeholders.length > 0"
    v-for="(stakeholderLabel, index) in stakeholderLabels"
    :key="stakeholderLabel.Key"
  >
    <label>{{ stakeholderLabel.Value }}:</label>
    <kendo-dropdownlist
      v-model="selectedStakeholders[index].Id"
      :data-source="stakeholders.filter(s => s.type == stakeholderLabel.Key)"
      data-text-field="name"
      data-value-field="Id"
      @select="selected"
    ></kendo-dropdownlist>

    <button @click="updateStakeholders">Update form</button>
  </div>
</template>

并在方法中：

selected(e) {
      const stakeholderTypeId = e.dataItem.type;
      const selectedStakeholderIndexForTypeId = this.selectedStakeholders.findIndex(
        s => s.type == stakeholderTypeId
      );
      this.$set(
        this.selectedStakeholders,
        selectedStakeholderIndexForTypeId,
        e.dataItem
      );
    }