vue js axios对数组列表的响应答案

【问题标题】：vue js axios response to array listvue js axios对数组列表的响应
【发布时间】：2019-04-25 16:04:40
【问题描述】：

我正在打字。我的 typeahead 接受一个像 ['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 返回： [ { “身份证”：1， “名称”：“加拿大” }, { “身份证”：2， “名称”：“美国” }, ]

【问题讨论】：

标签： vue.js axios

【解决方案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=&gt;x.name))

【讨论】：

现在，我的 api 返回 [ { "id": 1, "name": "Canada" ,"name2": "Canada2" }, { "id": 2, "name": "USA" "name2": "USA2" }, ] 如何转换为 ['Canada', 'Canada2', 'USA', 'USA2']??

【解决方案2】：

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

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

【讨论】：