Question

在我的设置中，我使用的是最新版本的VueJS + Vuetify。

在我的应用程序中，我有一个vue组件，该组件在模板端的列表中每个条目都有两个v-autocomplete元素。每个条目的第一个自动完成的项目都是通过外部API调用填充的。轴距。

每个条目/行中的第二个自动完成元素应根据第一个元素中选择的值进行填充。因此，当用户从自动完成列表中选择国家/地区时，应启动API调用，并且第二个自动完成元素（城市）应收到正确的选项。

实现此目标的最佳方法是什么？我尝试将getCities（）方法连接到第二个自动完成项属性，但是由于我的方法返回了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)
    }
  }
}

vue + vuetify相关的v-自动完成字段

1 个答案: