How to bind a dynamic <img> id to a JavaScript event? - vuejs2

Question

I am learning how to use a Javascript image annotation library called Annotorious. I want to integrate it into a Vue app and it works fine if I do this:
<img :src="photo.url" id="dog" :alt="photo.title" />
However, I am getting a console error if I do it like so:
<img :src="photo.url" :id="photo.id" :alt="photo.title" />
My full code for the SFC named PhotoDetail.vue: Codesandbox link
<template>
<div>
<h1>Test Photo</h1>
<img :src="photo.url" :id="photo.id" :alt="photo.title" />
</div>
</template>
<script>
import { Annotorious } from '#recogito/annotorious'
export default {
name: 'photoDetail',
data() {
return {
photo: {}
}
},
methods: {
async getPhoto() {
this.photo.url = await 'https://picsum.photos/id/237/400/'
this.photo.id = 'dog'
this.photo.title = 'nice dog'
},
annotatePhoto() {
try {
const anno = new Annotorious({
image: this.photo.id // image element or ID
})
// Attach listeners to handle annotation events
anno.on('createAnnotation', function(annotation) {
console.log('Created!', annotation)
})
} catch (error) {
console.log('anno error', error)
}
}
},
async created() {
await this.getPhoto()
},
mounted() {
this.annotatePhoto()
}
}
</script>
Console error:
anno error TypeError: Cannot read property 'nodeType' of undefined
at new e (annotorious.min.js:1)
at VueComponent.annotatePhoto (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PhotoDetail.vue?vue&type=script&lang=js&:51)
at VueComponent.mounted (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/PhotoDetail.vue?vue&type=script&lang=js&:84)
at invokeWithErrorHandling (vue.runtime.esm.js:1853)
at callHook (vue.runtime.esm.js:4213)
at Object.insert (vue.runtime.esm.js:3136)
at invokeInsertHook (vue.runtime.esm.js:6336)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6555)
at VueComponent.Vue._update (vue.runtime.esm.js:3942)
at VueComponent.updateComponent (vue.runtime.esm.js:4060)
Any advice? Thank you!

Answer 1

First, you need to make sure the img component is rendered before calling annotatePhoto function. That is, after getPhoto function:
async mounted() {
await this.getPhoto()
this.annotatePhoto()
}
You also need to change the way you update the photo variable like this, or the DOM won't update:
this.photo = {
url: await 'https://picsum.photos/id/237/400/',
id: 'dog',
title: 'nice dog',
}
Working example: sandbox