Question

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

所以我现在要做的是声明一个kendo-dropdownlist组件，但不给它任何data-source-ref。相反，我将其data-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;
    }
  }
};

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

Answer 1

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

如果使用

，则应调用它

setDataSource

代替

await this.setDataSource()

您可以单击任何数据，并且在await setDataSource()标签下可见相应的数据。

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

希望这会有所帮助！

双向数据绑定在Kendo UI上不起作用

1 个答案: