Conditionally bind class with Vue.js + Vuetify?

Question

I'm trying to conditionally apply the class "xs10" to a v-flex which contains my menu, based on the dimensions of the current screen. I've so far got something like this:

<v-flex v-bind:class="{ xs10: menuSmall}" fluid>

..data() {
 return {
  menuSmall: this.$vuetify.breakpoint.mdAndUp
 }
}

But it's not working. I'm new to Vue.js + Vuetify but I'm guessing it's because menuSmall is not being re-calculated and re-rendered on every screen resize. Do I need to put it into the 'mounted' life-cycle of my Vue instance to make this work?

Thanks for any help!

you will find your anwser at : stackoverflow.com/questions/48137224/… — Sébastien Blais
– Sébastien Blais, Commented Jan 31, 2018 at 13:55

Tim Hutchison · Accepted Answer · 2017-11-10 13:55:56Z

3

Give this a try

<v-flex v-bind:class="flexClass" fluid>  // Could also be just :class="flexClass"

computed: {
  flexClass(){
    return {
      xs10: this.$vuetify.breakpoint.mdAndUp
    }
  }
}

answered Nov 10, 2017 at 13:55

Tim Hutchison

3,65312 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 23:45:50Z

2

Just looking through docs, it seems xs10 should be applied to <v-flex> as an attribute, not a class.

Vuetify layout grid, example #1, view source
Vue conditional attributes

<v-flex :xs10="menuSmall" fluid>

..data() {
 return {
  menuSmall: this.$vuetify.breakpoint.mdAndUp
 }
}

edited Jul 15, 2022 at 23:45

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Nov 10, 2017 at 3:04

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

Conditionally bind class with Vue.js + Vuetify?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related