Элемент не определен, потому что он еще не визуализирован.Как этого ждать?

Question

В моем приложении Vue у меня есть элемент изображения с привязанным src.этот код в степпере.На одном шаге пользователь выбирает картинку для загрузки, а на следующем шаге изображение показывается (работает как задумано).Однако я пытаюсь запустить библиотеку для элемента на следующем шаге (библиотека Taggd), но элемент кажется неопределенным.

Я попробовал nextTick (), чтобы дождаться загрузки изображения, но безуспешно.

элемент изображения:

<div class="orientation-landscape">
    <div class="justify-center q-px-lg">
        <img v-if="photo.url" :src="photo.url" id="workingPhoto"
        style="width: 80vw;" ref="workingPhoto"/>
    </div>
</div>

Функции.Сначала я использую uploadFile, чтобы установить URL-адрес элемента изображения, и перехожу к следующему шагу, где изображение будет загружено.затем я вызываю initTaggd () для nextTick, однако это не удается, поскольку элемент не определен.

uploadFile(file) {
  const self = this;
  self.photo.file = file;
  self.setPhotoUrl(file);
  self.$refs.stepper2.next();
  console.log('We should be at next step now. doing the init');
  self.nextTick(self.initTaggd());
},

setPhotoUrl(file) {
  const self = this;
  self.photo.url = URL.createObjectURL(file);
  console.log('ping1');
},

initTaggd() {
  const self = this;
  const image = document.getElementById('workingPhoto');
  console.log('image:', image);     //THIS RETURNS UNDEFINED
  console.log('Trying ANOTHER element by refs:', self.$refs.stepper2);     // This returns the element
  console.log('trying the real element by reference', self.$refs.workingPhoto);     // Returns undefined again
  const taggd = new Taggd(image);      //All this here fails because image is undefined.
  console.log('ping2.5');
  taggd.setTags([
    self.createTag(),
    self.createTag(),
    self.createTag(),
  ]);
  console.log('ping3');
},

Я думаю, что я ищу способ дождаться полной загрузки изображения перед вызовом initTaggd (), но я теряюсь, как этого добиться.

Answer 1

Вы можете прослушать событие load:

<img 
    v-if="photo.url" 
    id="workingPhoto"
    ref="workingPhoto"
    :src="photo.url"
    style="width: 80vw;" 
    @load="initTaggd"
/>