元素未定义,因为它尚未呈现。怎么等呢?
Element is undefined because it is not rendered yet. How to wait for it?
在我的 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() 之前等待图像完全加载的方法,但我不知道如何实现这一点。
您可以监听 load
事件:
<img
v-if="photo.url"
id="workingPhoto"
ref="workingPhoto"
:src="photo.url"
style="width: 80vw;"
@load="initTaggd"
/>
在我的 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() 之前等待图像完全加载的方法,但我不知道如何实现这一点。
您可以监听 load
事件:
<img
v-if="photo.url"
id="workingPhoto"
ref="workingPhoto"
:src="photo.url"
style="width: 80vw;"
@load="initTaggd"
/>