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

元素未定义，因为尚未渲染。如何等待呢？

1 个答案: