Vue update data prop whenever element clientWidth changes

user_11882174 0
Viewed 517

I'm currently setting a data prop called w to whatever the clientWidth is for an element that I have in my HTML. It looks like this within my mounted hook:

data() {
 return {
  w: 0,
 };
},
mounted() {
  this.w = this.$refs.timelineProgress.clientWidth;
},

This works fine for initially setting this.w width that element's clientWidth but what I'm trying to do now is change the value of w whenever the clientWidth changes. This is so I can get the width of the element and store it whenever it shrinks or grows based on a devices screen size or if a user shrinks a page or something like that.

Any help solving this is greatly appreciated. Thank you.

vue.js sass css html javascript
2 Answers

you can probably try using created and unmounted method to attach a window resize event to your component.

created() {
    window.addEventListener('resize', this.resizeHandler);
}
unmounted() {
    window.removeEventListener('resize', this.resizeHandler);
}
methods: {
    resizeHandler() {
        this.w = this.$refs.timelineProgress.clientWidth;
    }
}

In the resizeHandler method you can also debounce the state updation to make it more performant.

user_38551790

To get reactive values based on something else changing in your app, use a computed value instead of data. Assuming your ref is referring to a vue component rendering a timeline of sorts:

computed:
  {
    w() {
      return this.$refs.timelineProgress.$el.clientWidth
    }
  }
user_115321240
Related