Почему нет доступа к exposed параметру из скрипта?

Question

[Дмитрий]

Использую vuetify (v-img).
onMounted говорит что свойство image undefined, но при клике на изображение в консоли отображается DOM-элемент. Причем, если сделать console.log(ddd.value) (без image), то отображается Proxy компонента.
Что я делаю не так?

<script setup>
import {onMounted, useTemplateRef} from 'vue'

const ddd = useTemplateRef('ddd')

onMounted(() => {
  console.log(ddd.value.image)
})

</script>

<template>
  <v-img
    src="@/assets/logo.png"
    ref="ddd"
    @click="console.log(ddd.image)"
  />
</template>

Comments

[Антон Антон]

а если вставить пару nextTick() или даже setTimeout(()=>console.log(ddd.value.image),1000)?

офф: мне почему-то vuetify не зашел. сейчас использую quasar + tailwind, но там свои приколы

Answer 1

[Rsa97]

Компонент VImg после монтирования запускает свой асинхронный процесс подгрузки изображения (событие loadstart). По завершению загрузки выдаётся событие load, при ошибке событие error. После load становятся доступными параметры изображения (naturalWidth, naturalHeight, currentSrc).
Привязывайтесь к этим событиям, чтобы точно получить нужные данные.

Comments

[Дмитрий]

Спасибо. Именно это я и понял после публикации вопроса.

Answer 2

[Дмитрий]

Апатамушта картинка еще не загрузилась... бл...