Как отображать данные из API в теге select?
Я получаю некоторые данные из своего 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" и посмотреть, есть ли в этом массиве какие-либо элементы, но в этом случае выберите вообще не отображать. Кто-нибудь может мне помочь?
как вы заполняете dataToUse?
Ответы 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#Выбрать
да, я сделал то же самое. Я забываю об этом странном поведении объекта с реактивностью. Необходимо использовать Vue.set или переписывать объект каждый раз
Я думаю, что нахожу решения. это потому, что у меня есть 4 массива, и все они внутри одного объекта, и у объектов есть некоторые проблемы с «реактивностью»