Using if on height prop in vuetify

Question

I have some card with height prop for height ofc.. I need to have different heights for xs and higher sizes so I did this:

<v-card height="250"> --> works

<v-card :height="[$vuetify.breakpoint.xs ? 450 : '250']">

And I get error that says, number or string expected got array.

For other things like :class, :style etc works fine...

Answer 1

Try a computed property to return the height like :

  computed:{
       getHeight(){
            return this.$vuetify.breakpoint.xs ? 450 : '250';
          }
     }

and inside template :

<v-card :height="getHeight">

if you don't want to use any property you could use it by removing the brackets like :

  <v-card :height="$vuetify.breakpoint.xs ? 450 : '250'">