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...

You were returning `[]` array with one value (450 or 250) and it was expecing a string. Instead of `:height="[$vuetify.breakpoint.xs ? 450 : '250']"`, you should write it without `[]`. Like this `:height="$vuetify.breakpoint.xs ? 450 : '250'"`. But I would go with the answer and create the `computed` property :) — ljubadr, Jan 12 '19 at 22:19

Boussadjra Brahim · Accepted Answer · 2019-01-12T21:44:58.433

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'">

edited Jan 12 '19 at 21:44

answered Jan 12 '19 at 21:37

Boussadjra Brahim

I know that works, if I have 100+ different values I need 100+ different computed or one method with switch case but I would like to know why it doesnt work within prop like for other things – Learner Jan 12 '19 at 21:40
i did that and you could learn more about breakpoints [`here`](https://vuetifyjs.com/en/framework/breakpoints#breakpoints) – Boussadjra Brahim Jan 12 '19 at 21:45

1 Answers1