Dynamic src of UAvatar not loading properly on page reload
I have a component
<div>
<UAvatar :src="selectedPlayer.photo" icon="i-lucide-user" size="3xl" class="ring-2 ring-neutral" />
<USelectMenu
v-model="selectedPlayer"
:items="data.value || []"
/>
</div>
Where selectedPlayer is updated with
const { data, status } = useFetch("/api/player", { lazy: true })
watchEffect(() => {
if (data.value) {
selectedPlayer.value = { id: data.value.playerId, label: data.value.playerName }
}
})
When the page loads, the select menu selects the proper item but the Avatar picture is not loading.
If I change the item in the select menu, it works. How can I fix that?
<div>
<UAvatar :src="selectedPlayer.photo" icon="i-lucide-user" size="3xl" class="ring-2 ring-neutral" />
<USelectMenu
v-model="selectedPlayer"
:items="data.value || []"
/>
</div>
Where selectedPlayer is updated with
const { data, status } = useFetch("/api/player", { lazy: true })
watchEffect(() => {
if (data.value) {
selectedPlayer.value = { id: data.value.playerId, label: data.value.playerName }
}
})
When the page loads, the select menu selects the proper item but the Avatar picture is not loading.
If I change the item in the select menu, it works. How can I fix that?
