CODEWITHSUNDEEP
javascriptvue.js
Jun Dolor
Jun Dolor

Reputation: 639

How do I set a dynamic style property in Vue JS

I'm trying to set the minimum height of an element is a .vue page. The style attribute has a bind to the styleObject

    <b-container class="mt-3" v-bind:style="styleObject">

I'm using mounted in my script to set up the styleObject.

    export default {
      data: function() {
        containerHeight: null,
        styleObject: {
          minHeight: this.containerHeight
        }
      },
      mounted() {

        let headerHeight = document.querySelector('#header').offsetHeight; 
        let navHeight = document.querySelector('#main-menu').offsetHeight; 
        let footerHeight = document.querySelector('#footer').offsetHeight; 

        let ht = screen.height - (headerHeight + navHeight + footerHeight);

        alert(ht);//the calculated height is displayed

        this.containerHeight = ht + "px";
      }
    }

The container height does not adjust

Upvotes: 1

Views: 468

Answers (1)

T. Short
T. Short

Reputation: 3614

You should not use other data props as a value for another data prop when you declare them as they won't be reactive.

Avoid:

styleObject: {
      minHeight: this.containerHeight
    }

Just set it to null and do

styleObject: {
      minHeight: null
    }

this.styleObject.minHeight = ht + "px";

Upvotes: 2

Related Questions