元素未定义，因为它尚未呈现。怎么等呢？

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 并转到将加载图像的下一步。然后我在 nextTick 上调用 initTaggd() 但是失败了，因为该元素未定义。

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"
/>

元素未定义，因为它尚未呈现。怎么等呢？

Element is undefined because it is not rendered yet. How to wait for it?

undefined

refs

vue.js

quasar