vue js axios ответ на список массивов

Question

Я работаю над головой.и мой typeahead принимает список массивов вроде ['Canada', 'USA', 'Mexico'].и теперь у меня есть axi 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, "name": "Canada"}, {"id": 2, "name":"США"},]

Answer 1

Вы можете использовать array.map, чтобы взять только такие имена:

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

Answer 2

Используйте хук жизненного цикла created() для получения данных:

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

В ваших данных () обязательно инициализируйте пустой массив:

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

Простотак что вы видите, что делает функция map:

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