v-model="media"
:items="property.media"
/>
Nuxt использует apollo. запрос вида
apollo: {
properties: {
prefetch: true,
query: PropertyByID,
variables () {
return { id: [this.$route.params.id] }
},
update ({ properties: { data: listings } }) {
if (!listings[0]) {
this.$nuxt.error({ statusCode: 404, message: 'Property not found' })
} else {
const l = listings[0]
this.property = l
this.features = JSON.parse(l.features)
this.property.type_id = l.type.id
this.region = {
country: l.city.state.country,
state: {
id: l.city.state.id,
name: l.city.state.name
},
city: l.city,
address: l.address,
postcode: l.postcode,
lat: l.lat,
lng: l.lng
}
}
}
}
}
Проблема в том что при загрузке property.media еще нету и как результат media компонент рендерится пустным.
Решением является вызвать компонент с условием
<media
v-if="property.media"
v-model="media"
:items="property.media"
/>
Но как по мне это костыль, еще есть вариант сделать timeoute в вызывать через 2 секундs отрисовку компонента, и это костыль.
Подскажите есть ли еще варианты??
v-if - не костыль если правильно обыграть, добавить какой-то прелоудер в v-else но если нужно вообще без него, запрос нужно выполнить в хуке asyncData, вопрос только в том поддерживает ли это реализация аполло которой ты пользуешься. Типа того: async asyncData({$apollo}) { const { data } = await $apollo.query(gql) return data }
ок поищю вариант с asyncData
Обсуждают сегодня