[FIXED] How to render data from api in select tag?

Issue

I get some data from the my api.I use axios for this and everything works fine.

Actually I get array of objects and I want to render them in select tag, but it doesn't render because component mounted before I get some data from api, so it looks like it is not reactive.

<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>

I tried to use v-if = "dataToUse.cities.length" and see if this array have any items, but in this case select not rendered at all. Can someone help me?

Solution

Look this example:

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

In this case you have to replace the "options" by your response of your API

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

Reference: https://v2.vuejs.org/v2/guide/forms.html#Select

Answered By - Andres Ruales

Answer Checked By - Willingham (PHPFixing Volunteer)