Conditionally bind class with Vue.js + Vuetify?

问题

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!

回答1:

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

回答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
 }
}

来源：https://stackoverflow.com/questions/47212422/conditionally-bind-class-with-vue-js-vuetify