时间戳

首页 > 解决方案 > 将 Kendo vue 下拉列表绑定到对象数组

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

问题描述

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

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

此页面上必须显示的数量dropdownlist应等于typeAPI 响应数组中唯一值的数量。即， 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的选择始终与默认选择值相同。即使我在 any 中选择了不同的选项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 上，即使用户更改选择，所选选项也始终是默认选项. 此外，当我订阅changeandselect事件时，我看到只有 select 事件被触发，而 change 事件永远不会触发。

标签： javascriptvue.jsdata-bindingkendo-ui

解决方案

所以原来是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
      );
    }

推荐阅读