Question

我正在提前输入。我的预输入接受数组列表，例如['Canada'，'USA'，'Mexico']。现在我有一个axios api来获取国家列表。但我不知道如何转换为数组列表。现在，如果对国家/地区列表进行硬编码即可。

<vue-bootstrap-typeahead
 :data="addresses"
 v-model="addressSearch"
/>
data() {
 return {
  addresses: ['Canada', 'USA', 'Mexico'],
  addressSearch: '',
 }
},
axios.get('api_link', {})
  .then(function (response) {
  //How can i create a array list from api return useing name like addresses?
})

我的api返回： [ { “ id”：1 “名称”：“加拿大” }， { “ id”：2 “名称”：“美国” }， ]

Answer 1

利用created()生命周期挂钩来获取数据：

created() {
  axios.get('api_link', {})
    .then((response) => { this.addresses = response.data.map(x => x.name) })
}

在您的data（）中，请确保初始化为空数组：

data() {
  return {
    addresses: [],
    ...
}

这样您就可以看到map函数的作用：

console.log([ { "id": 1, "name": "Canada" }, { "id": 2, "name": "USA" }, ].map(x=>x.name))

Answer 2

您可以使用array.map仅使用这样的名称：

axios.get('api_link', {})
  .then((response) => {
    this.addresses = response.data.map(country => country.name)
  })

vue js axios对数组列表的响应

2 个答案: