How to use v-bind:height?

Question

How do I dynamically set a height of an element? I have a v-carousel but it takes way too much space on the screen. So I need something like:

v-bind:height="{ '300' : $vuetify.breakpoint.mdAndDown}"

But it doesn't work. I also though 'well maybe it's a string, so let's try a number'

:height="{ 300 : $vuetify.breakpoint.mdAndDown }"

And it didn't work either. tried also 300px and '300px' and none of it works.

user_8172857 · Answer

The right syntax is to bind the height to a computed property like :

and :

  computed:{
    customHeight(){
      return this.$vuetify.breakpoint.mdAndDown?300:500;
    }
  }