Vuejs 3 – Unable to remove resizeEvent

I have resize event in my mounted() works well.

 data() {
    return {
      ...
      eventHandler: null,
    };
  },
  mounted() {
    this.eventHandler = window.addEventListener("resize", () => {
      console.log("resize");
    });
  },

but when I tried to remove the resize listener on unmount()

  beforeUnmount() {
    console.log("unmonunted");
    window.removeEventListener("resize", this.eventHandler);
  },

the resize event is still firing

Anyone know how to solve this?

>Solution :

window.addEventListener returns undefined, not the event handler function.

You should change your code like this:

  data() {
    return {};
  },
  mounted() {
    window.addEventListener("resize", this.eventHandler);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.eventHandler);
  },
  methods: {
    eventHandler() {
      console.log("resize");
    }
  }