Add support for a v-on:resize event

[scottfriebel]

It would be nice if there was a built in way to handle resizing.
Ex:

<div class="example" v-on:resize="handleResize($event)">
</div>

[yyx990803]

resize is a window event. You cannot listen to it on normal elements.

Do it in lifecycle hooks of your components:

ready: function () {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy: function () {
  window.removeEventListener('resize', this.handleResize)
}

[riliwanrabo]

@yyx990803 Sir I have this:

_// template_
<div class="wrapper__Row" :style="{ height: fullHeight+'px' }" />

_// in my script_
data() {
 return {
   fullHeight: document.documentElement.clientHeight
  }
}

However if i resize the browser the height remains same

[itsMapleLeaf]

@riliwanrabo

You need to use an event handler on the window to listen to the resize event, as he's shown above. The code there sets the value fullHeight once in your data, then does nothing else.

This is what you'll want to do instead:

  // initialize data
  data() {
   return {
     fullHeight: document.documentElement.clientHeight
    }
  },

  // bind event handlers to the `handleResize` method (defined below)
  ready: function () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize)
  },

  methods: {
    // whenever the document is resized, re-set the 'fullHeight' variable
    handleResize (event) {
      this.fullHeight = document.documentElement.clientHeight
    }
  }

In your case, though... it seems like this style will work just as well, without needing to use the resize event at all.

<div class="wrapper__Row" style="height: 100vh"></div>

If you have any more questions, feel free to ask on the VueJS forums or on Gitter.

[JordanDelcros]

What about store the target boundingClientRect (or anything else) and use a common resize event on window that loop through all request resize and compare current size and stored size, then do callback if needed... ?

[eybarta]

I thought a $forceUpdate would recalculate all computed properties within my component...
So I was listening to window resize event and $forceUpdate in the callback, thinking my computed
property that uses the window width would recalculate accordingly and update the template,

Is this supposed to work, or am I thinking of this the wrong way?

thx

[pablohpsilva]

@eybarta I think you're doing it wrong. $forceUpdate can cost a lot. Why not use the event and a variable?

export default {
  data() {
    return { windowWidth: window.innerWidth };
  },
  methods: {
    handleWindowResize(event) { this.windowWidth = event.currentTarget.innerWidth; },
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this. handleWindowResize)
  },
  mounted() {
    window.addEventListener('resize', this.handleWindowResize);
  },
}

[Akryum]

Did you try vue-resize?

[wbswjc]

Use mounted instead of ready in Vue 2, see https://vuejs.org/v2/guide/migration.html#ready-replaced

[blackandred]

@pablohpsilva Thanks for that, simple and works really cool.

[AdsonCicilioti]

Hey @pablohpsilva .. How ro listen width from a child component and pass to parent component element?