How to remove an event in Vue?

Question

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?

I don't know if it helps but you could check a flag inside the onPasteEvent handler that just returns if true and set it when you need instead of having to remove the event listener. — Manuch
– Manuch, Commented Dec 21, 2021 at 20:12

tony19 · Accepted Answer · 2022-09-06 19:16:16Z

3

Your code is already removing the event listener correctly, but there's a couple other problems:

onPasteEvent returns a function, so when the paste event occurs, the handler only returns a new function (which does not get executed), so it's basically doing nothing useful.

To fix the paste event handler, convert the returned function into the onPasteEvent function itself:

export default {
  methods: {
    async onPasteEvent (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.')
      }
    }
  }
}

And if you're using Vue 3, the beforeDestroy hook from Vue 2 is renamed to beforeUnmount:

export default {
  // beforeDestroy() { ❌ renamed in Vue 3

  beforeUnmount() { ✅
    document.removeEventListener('paste', this.onPasteEvent)
  },
}

demo

edited Sep 6, 2022 at 19:16

answered Dec 21, 2021 at 20:38

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony19 Over a year ago

The event is automatically passed to the event handler. Passing additional args is beyond the scope of the original question. I recommend posting a new question about that so that someone familiar with the topic could answer. I'll chime in if I can.

Collectives™ on Stack Overflow

How to remove an event in Vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related