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

Question

示例 https://stackblitz.com/edit/usjgwp?file=index.html

我想在一个页面上显示一些剑道dropdownlist(s)。确切的数字取决于 API 调用。这个 API 调用将为我提供一系列利益相关者对象。 Stakeholder 对象具有以下属性：Id、name、type、role 和 isSelected。

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

现在，每个下拉菜单都将有一个基于type 属性的datasource。即，对于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 显示一些默认选项，允许用户在所有不同的下拉列表中选择不同的选项，然后检索所有选择，然后单击更新按钮。

更新： 当我使用第一种方法进行绑定时，selectedStakeholders数组中对象的Id属性实际上是在变化的，但它并没有反映在UI上，即在UI上，即使选择的选项始终是默认选项当用户更改选择时。 此外，当我订阅change 和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
      );
    }