Двухстороннее связывание данных не работает в Kendo UI

Question

У меня есть компонент kendo-dropdownlist, который получает данные из вызова API.Я реализовал это, используя компонент kendo-datasource, и все работало нормально.Но теперь у меня есть несколько kendo-dropdownlist компонентов, и вместо того, чтобы делать вызов API для каждого компонента kendo-dropdownlist, я должен сделать только один вызов API, и все компоненты kendo-dropdownlist должны получить свои данные из одного и того же ответа JSON.Это kendo-dropdownlist связано со свойством, называемым currentData.

Итак, что я делаю сейчас, так это то, что я объявляю kendo-dropdownlist компонент, но не даю ему никакого data-source-ref.Вместо этого я устанавливаю атрибут data-source для локального свойства данных, называемого «источником», который представляет собой массив JSON.

Затем в хуке жизненного цикла mount я выполняю вызов API и устанавливаюответ на свойство данных «source».После этого выпадающие элементы заполняются в 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

Надеюсь, это поможет!