CODEWITHSUNDEEP
vue.jscomputed-properties
MichaSch
MichaSch

Reputation: 29

Vue.js - Component Height and Width not computed

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?

Upvotes: 0

Views: 882

Answers (1)

Thomas Kuhlmann
Thomas Kuhlmann

Reputation: 1003

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

Upvotes: 1

Related Questions