Data not updating in style binding (Vue)

Question

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?

Abdelillah Aissani · Accepted Answer · 2019-07-28 17:25:12Z

13

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>

answered Jul 28, 2019 at 17:25

Abdelillah Aissani

3,1082 gold badges13 silver badges25 bronze badges

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

4 Comments

tobiasg Over a year ago

I saw that you commented first, so the correct answer point goes to you. :) Like I mentioned above though, totalHeight is set to 0 as a Number from the start, and that showed up as <div style="height: 0px;"> in the rendered HTML, with the "px" added. So it seems like Vue adds the "px" automatically but doesn't update the value in a reactive way. The style seems to only become reactive if you add the "px" manually.

Abdelillah Aissani Over a year ago

Yes .. Actually vue does't add that automatically .... if you don't add the "px" ...any value you give to ´height´ will be coerced implicitly to "0px" cause binding a number is not a valid input and since you have bound the proprety it might be better for vue to convert that to 0 than throwing an error...And btw this was happening alot to me .

tobiasg Over a year ago

Ah, I see! So it was just a coincidence that my intial data value was set to 0. It would've been set to 0px either way if I understand it correctly? Anyways, thanks for the info and for the help!

shamaseen Over a year ago

and They said Vue is easy to debug, I didn't even find a broken height : 1000 in the browser development tool

S.S. Anne · Accepted Answer · 2019-07-28 17:33:28Z

5

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

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

edited Jul 28, 2019 at 17:33

S.S. Anne

15.7k8 gold badges43 silver badges82 bronze badges

answered Jul 28, 2019 at 16:37

saravana

3311 silver badge6 bronze badges

1 Comment

tobiasg Over a year ago

Hmm. I think Vue adds the ”px” automatically since the raw data value from the beginning is just a number but then shows as “0px” in the inline style of the element in my case. But I’ll try it and see.

agm1984 · Accepted Answer · 2023-08-30 18:31:32Z

0

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.

answered Aug 30, 2023 at 18:31

agm1984

17.4k6 gold badges108 silver badges120 bronze badges

Collectives™ on Stack Overflow

Data not updating in style binding (Vue)

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related