Vue.js - Component Height and Width not computed

Question

I have the following code within my component:

computed: {
    gridWidth()  { return (this.$el && this.$el.offsetWidth)  },
    gridHeight() { return (this.$el && this.$el.offsetHeight) },
},
mounted(){
    console.log(this.$el && this.$el.offsetWidth, this.gridWidth, this.$el && this.$el.offsetHeight, this.gridHeight)
},

The console output is:

1766 undefined 931 undefined

Why are the computed properties undefined?

Would be a watcher the right way? Why and how to realize?

Did you try this in your mounted.......this.$nextTick(() => { console.log(this.$el && this.$el.offsetWidth, this.$el && this.$el.offsetHeight, this.gridHeight)}) — Amaarockz
– Amaarockz, Commented Jan 14, 2021 at 11:32

tony19 · Accepted Answer · 2022-07-16 00:51:40Z

1

This is basically related to how reactivity in Vue works. By default your DOM is not continually providing updated values.

You can either play around with vm.$nextTick and vm.$watch to basically attach a watcher after the rendering has been finished, or you can use a small library which does exactly what you are looking for:

vue-resize-directive

edited Jul 16, 2022 at 0:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 14, 2021 at 11:26

Thomas Kuhlmann

1,0139 silver badges18 bronze badges

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

1 Comment

MichaSch Over a year ago

Thanks. Now, I realized it with the resize event.

Collectives™ on Stack Overflow

Vue.js - Component Height and Width not computed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related