In my Vue instance, I am looking to have a response triggered by a click on an uploaded thumbnail.
Utilizing the Vue package called FineUploader Vue with the template layout as outlined in the documentation (refer to end of question). After uploading an image, the output resembles a tree structure like this:
<Root>
<Gallery>
<Thumbnail>
</Gallery>
</Root>
With a background mainly focused on jQuery, I find myself unsure of the 'correct' approach since the Thumbnail Template is already predefined by the package, and I'm not creating a custom Thumbnail template. Despite being able to access elements like this:
let thumb = this.$el.querySelector('.vue-fine-uploader-thumbnail');I believe adding a listener might help:
thumb.addEventListener('click', function() {
alert('I got clicked');
});
However, I am unfamiliar with handling situations where the Vue instance undergoes rerendering.
Vue Template:
<template>
<Gallery :uploader="uploader" />
</template>
<script>
import FineUploaderTraditional from 'fine-uploader-wrappers'
import Gallery from 'vue-fineuploader/gallery'
export default {
components: {
Gallery
},
data () {
const uploader = new FineUploaderTraditional({
options: {/*snip*/}
})
return {
uploader
}
}
}
</script>