I have a image slide ponent which has resize event

imageSliderComponent.vue

methods: {
 resize: function () {
   console.log(this.$el)
   // Handle window resize
   // Code
 }
}
mounted () {
 window.onresize = this.resize
}

And in the parent ponent i am using this image slider in multiple places, some thing like this

App.vue

<image-slider :data="data1" />   // Slider 1
<image-slider :data="data2" />   // Slider 2

So when i try to resize the window, window.resize event is working only for the last occurred ponent(i.e., Slider 2). For the first ponent(Slider 1) resize method is not working.

Is there any way to handle resize independently for reusable ponent? please suggest if there is any other different implementation.

I have a image slide ponent which has resize event

imageSliderComponent.vue

methods: {
 resize: function () {
   console.log(this.$el)
   // Handle window resize
   // Code
 }
}
mounted () {
 window.onresize = this.resize
}

And in the parent ponent i am using this image slider in multiple places, some thing like this

App.vue

<image-slider :data="data1" />   // Slider 1
<image-slider :data="data2" />   // Slider 2

So when i try to resize the window, window.resize event is working only for the last occurred ponent(i.e., Slider 2). For the first ponent(Slider 1) resize method is not working.

Is there any way to handle resize independently for reusable ponent? please suggest if there is any other different implementation.

• javascript
• vue.js

1 Answer 1

You are overriding the onresize handler every time, this causes only the last mounted ponent to work.

You need to instead use addEventListener:

mounted () {
 // You probably also want to call .bind as otherwise the `this` will not point to the ponent
 this._boundedResize = this.resize.bind(this); // Store in a var in order to remove it later
 window.addEventListener("resize", this._boundedResize);
}

destroyed() {
 window.removeEventListener("resize", this._boundedResize);
}