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

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属性设置为一个名为"source“的本地数据属性，这是一个JSON数组。

然后，在源生命周期钩子中，我进行mount调用并将响应设置为“源”数据属性。在此之后，下拉项被填充到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

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

如果您使用

await this.setDataSource()

而不是

await setDataSource()

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

更新的StackBlitz链接:这里是工作的Stackblitz

希望这能有所帮助！