Как визуализировать данные из API в теге select?

Question

Я получаю некоторые данные из моего API. Я использую Axios для этого, и все работает нормально.

На самом деле я получаю массив объектов и хочу отобразить их в теге select, но он не отображается, потому что компонент подключен до того, как я получаю некоторые данные из API, поэтому похоже, что он не реагирует.

<select v-model="book.cityId">
                    <option value="" disabled selected>Select city</option>
                    <option v-for = "city in dataToUse.cities" :key = "city.id" :value="city.id">
                        {{city.name}}
                    </option>
                </select>

Я попытался использовать v-if = "dataToUse.cities.length" и посмотреть, есть ли в этом массиве какие-либо элементы, но в этом случае выберите вообще не отображать. Кто-нибудь может мне помочь?

Answer 1

Посмотрите этот пример:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

В этом случае вы должны заменить «опции» своим ответом на ваш API

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Ссылка: https://vuejs.org/v2/guide/forms.html#Select