CODEWITHSUNDEEP
cssvue.jsvuejs2vue-component
user12009061
user12009061

Reputation:

How to remove style binding based on screen height media query (by condition) in Vue.js?

The component has the following binding:

 <div
    class="columns dropdowns"
    :style="{
      height: `${dropdownsgridheight}px`,
    }"
  >

That height is getting calculated based on count of dropdowns. On mobile screens, it shows poorly. So I need to remove this style binding when screen height is less than 812px. How can it be done correctly in Vue.js?

Upvotes: 0

Views: 473

Answers (1)

Naomi Messing
Naomi Messing

Reputation: 668

Try this:

<div
  class="columns dropdowns"
  :style="finalHeight"
 ></div>

and in your component:

data() {
  return {
      finalHeight: ''
  }
},
created() {
   window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
   window.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler() {
    if(window.innerHeight > 812) {
       this.finalHeight = {
          "height": this.dropdownsgridheight + 'px'
       }
    }
    else {
       this.finalHeight = '15px'
    }
  },
},
computed: {
  dropdownsgridheight () {
         return '50'
    }
},
mounted() {
   this.myEventHandler()
}

here is an example: https://jsfiddle.net/Nanif/yvw2h5pe/1/

Upvotes: 1

Related Questions