Question

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

我想在页面上显示多个剑道dropdownlist。确切的数目取决于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事件，而change事件则永远不会触发。

Answer 1

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

我必须像这样显式更改<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
      );
    }

在方法中：

"rule-empty-line-before": [
  "always", {
    "except": ["inside-block-and-after-rule"]
  }
],

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

1 个答案: