vue + vuetify связанные поля v-автозаполнения

Question

В моей настройке я использую последнюю версию VueJS + Vuetify.

В моем приложении есть компонент vue, который на стороне шаблона имеет два элемента v-autocomplete для каждой записи в списке.Элементы первого автозаполнения каждой записи заполняются из внешнего вызова API через.axios.

Второй элемент автозаполнения в каждой записи / строке должен заполняться в зависимости от значения, выбранного в первом.Поэтому, когда пользователь выбирает страну из списка автозаполнения, должен быть инициирован вызов API, и второй элемент автозаполнения (города) должен получить правильные параметры.

Каков наилучший способ достижения этого?Я попытался подключить свой метод getCities () ко второму свойству autocomplete items, но так как мой метод возвращает Promise, это не сработало.

Обратите внимание, что я не могу просто присвоить значение, возвращаемоеобещание (например, this.cities = res.data) для свойства, так как мои поля автозаполнения являются динамическими / расширяемыми.

Я создал скрипку, которая представляет то, что у меня есть в данный момент: http://jsfiddle.net/mgto7uea/3 (примечание,один вызов API зависит от локального источника данных.

Любая помощь очень ценится!

Спасибо!

Answer 1

Вы можете посмотреть первое автозаполнение и выбрать там города:

<template>
  <!-- cities autocomplete -->
  <v-autocomplete v-model="item.city" :items="cities" item-text="name">
  </v-autocomplete>
</template>

methods: {
  //...
  getCities(country) {
    axios.get('https://cities-api.local/rest/v2/' + country).then(resp => {
      this.cities = resp.data //assuming the response data returns the citites
    })
  }
},
watch: {
  gItems: {
    deep: true,
    handler(data) {
      this.getCities(data[0].country)
    }
  }
}