I'm trying to reactively set the height of a wrapper div using data in Vue. The data is set when all the children of the wrapper div is loaded and is then set to the totalt height of all of them added together. Basically I want the wrapper to have a fixed pixel value in CSS based on the height of all of its children combined.

I use watch to set the height after the content from the database has been loaded. post in the code below is the array from the database that contains the data of the post that the current component should render from.

watch: {
        post(){
            this.$nextTick(() => {
                this.setTotalHeight();
            })
        }
    }

The setTotalHeight() method looks like this:

setTotalHeight() {
            this.totalHeight = this.$refs.top.offsetHeight + this.$refs.middle.offsetHeight + this.$refs.bottom.offsetHeight
        }

I also trigger the setTotalHeight() method on resize.

When these functions has run, the totalHeight data value is set to the number that the calculation in setTotalHeight() equals to. I can see the value if I look in the dev tools, and if I output the value with {{totalHeight}} in the "DOM", I can see it with the correct value.

However, when I try to apply this value to the wrapper div by doing :style="{height: totalHeight}", it's not updating. I initially set the totalHeight data value to 0, and this is what the style is being set to without ever changing.

Am I doing something wrong with this or why is the style binding not updating when the data itself is updating and the output in the "DOM" with {{totalHeight}} is updating accordingly? Is style binding not reactive or what might be causing this?

I'm trying to reactively set the height of a wrapper div using data in Vue. The data is set when all the children of the wrapper div is loaded and is then set to the totalt height of all of them added together. Basically I want the wrapper to have a fixed pixel value in CSS based on the height of all of its children combined.

I use watch to set the height after the content from the database has been loaded. post in the code below is the array from the database that contains the data of the post that the current component should render from.

watch: {
        post(){
            this.$nextTick(() => {
                this.setTotalHeight();
            })
        }
    }

The setTotalHeight() method looks like this:

setTotalHeight() {
            this.totalHeight = this.$refs.top.offsetHeight + this.$refs.middle.offsetHeight + this.$refs.bottom.offsetHeight
        }

I also trigger the setTotalHeight() method on resize.

When these functions has run, the totalHeight data value is set to the number that the calculation in setTotalHeight() equals to. I can see the value if I look in the dev tools, and if I output the value with {{totalHeight}} in the "DOM", I can see it with the correct value.

However, when I try to apply this value to the wrapper div by doing :style="{height: totalHeight}", it's not updating. I initially set the totalHeight data value to 0, and this is what the style is being set to without ever changing.

Am I doing something wrong with this or why is the style binding not updating when the data itself is updating and the output in the "DOM" with {{totalHeight}} is updating accordingly? Is style binding not reactive or what might be causing this?

• javascript
• vue.js

3 Answers 3

Its just like you are setting a CSS height proprety with no unit height : 1000

you need to add the unit after the height on the style binding (px/em...etc) like:

<wrapper :style="{height: totalHeight +'px'}" </wrapper> 

Did you add 'px' to your height value? If not, try this:

:style="{height:totalHeight+'px'}" 

I had a problem here moments ago and it ended up being caused by applying a class while applying a conflicting style:

<div class="flex-1" :style="{ height: '800px' }">

That failed because flex-1 caused the explicit height to be ignored. After removing flex-1 it worked as expected and is reactive.

Be careful about that if you find similar issue.