时间戳

首页 > 解决方案 > 两种方式数据绑定在 Kendo UI 上不起作用

javascript - 两种方式数据绑定在 Kendo UI 上不起作用

问题描述

我有一个kendo-dropdownlist从 API 调用中获取数据的组件。我已经使用该kendo-datasource组件实现了这一点，并且一切正常。但是我现在有多个kendo-dropdownlist组件，而不是为每个kendo-dropdownlist组件进行 API 调用，我应该只进行一次 API 调用，并且所有kendo-dropdownlist组件都应该从同一个 JSON 响应中获取它的数据。这kendo-dropdownlist绑定到一个名为“currentData”的属性。

所以我现在正在做的是我声明一个kendo-dropdownlist组件但没有给它任何data-source-ref. 相反，我将它的data-source属性设置为一个名为“source”的本地数据属性，它是一个 JSON 数组。

然后在mount生命周期钩子中，我进行 API 调用并将响应设置为“源”数据属性。在此之后，下拉项目被填充kendo-dropdownlist但未选择“currentData”。

组件模板：

<kendo-dropdownlist
              v-model="currentData"
              :data-source="source.filter(s => s.type == 'something')"
              data-text-field="name"
              data-value-field="Id"
            ></kendo-dropdownlist>

组件脚本：

export default {
  name: "SomeComponent",
  props: {
    prop1: String
  },
  data() {
    return {
      currentData: this.prop1
      source: []
    };
  },
  mounted: async function() {
    await this.setDataSource();
  },
  methods: {        
    async setDataSource() {
      const formDTO = await SERVICE.getDataSource();
      this.source= formDTO.stakeholders;
    }
  }
};

我可以确认源数组中的一个对象的 Id 属性等于this.prop1.

标签： javascriptvue.jskendo-ui

解决方案

我可以在你的mounted生命周期钩子中看到，你已经调用了setDataSource函数。但是您错过了对该功能的引用。

如果你使用它应该被调用

await this.setDataSource()

代替

await setDataSource()

您可以单击任何数据，相应的数据在<p></p>标签下可见。

更新的 StackBlitz 链接：这是工作中的Stackblitz

希望这可以帮助！

推荐阅读