On my Vue instance i have this:
async mounted () {
document.addEventListener('paste', this.onPasteEvent)
},
beforeDestroy () {
document.removeEventListener('paste', this.onPasteEvent)
},
methods: {
onPasteEvent () {
return async (event) => {
try {
const items = event.clipboardData.items
const files = await this.getBase64Files(items)
this.transferedItems = files
this.modal = true
} catch (error) {
this.$toast.error('Não foi possível detectar um arquivo na área de transferência.')
}
}
},
I’m trying to destroy the “paste” event when the component is destroyed, but this just doesnt work, i know i need to pass the same reference to removeEventListener
, but is this not the same reference?
The only way i found to make this work is placing the onPasteEvent
method outside the Vue instance as a constant
, but that way i don’t have access to this
instance, which is important to me, also, i can’t pass anything as arguments, if i try to pass something, looks like my function create a new reference on memory, making unable to destroy it using removeEventListener
.
Please, i just don’t understand how to remove a event in Javascript, can someone help me with that example? I already saw a lot of similar questions but no one explains:
- How to keep the method reference even if it has parameters.
- How to remove the event working with Vue instances.