Vue.js remove event listener without function

Question

I added a event listener to my document like this:

deleteTask(event){
     // myFunc
}

created() {
     document.addEventListener("keypress", this.deleteTask);
},

This happened in my Home.vue component. Now i want to remove this event listener in my Card.vue component. Like so:

document.removeEventListener("keypress", this.deleteTask);

This obviously doesn't work since this.deleteTask is not known in the Card.vue component. But i need the deleteTask func to stay in my Home.vue cause it operates on some arrays there. So my question is now: What is the best way to do this?

Crackers · Accepted Answer · 2018-08-15 12:40:19Z

1

You could create an EventBus.

Create a new js file with:

import Vue from 'vue';
export const EventBus = new Vue();

Now you can in your Home.vue listen to events:

created() {
   ...
   EventBus.$on('removeListener', () => { document.removeEventListener("keypress", this.deleteTask); })
}

The event removeListener will then be called in Card.vue using EventBus.$emit('removeListener')

answered Aug 15, 2018 at 12:40

Crackers

1,1257 silver badges14 bronze badges

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

2 Comments

bollefreshavacado Over a year ago

Do i have to manage some imports to make this work? because im getting a error that EventBus is not defined in my Home.vue

Crackers Over a year ago

Yes, you will have to import { EventBus } from 'path/to/js' in both components

user9805590 · Accepted Answer · 2018-08-15 11:54:35Z

0

Don't make it global, let it to listen only in your component:

<template>
  <div @keypress="deleteTask">
    ...
  </div>
</template>

answered Aug 15, 2018 at 11:54

user9805590

1 Comment

bollefreshavacado Over a year ago

But how do i then remove the task from my array which is in my Home.vue component? The problem is that i have a Home.vue component which holds a list component and this than holds a cardlist component and than a card component

Collectives™ on Stack Overflow

Vue.js remove event listener without function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related