クラスを条件付きでVue.js + Vuetifyでバインドしますか？

Question

現在の画面の大きさに基づいて、メニューを含むv-flexに条件付きで "xs10"クラスを適用しようとしています。私はこれまでこのような何かを持っている：

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

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

しかし、それは働いていません。私はVue.js + Vuetifyの新機能ですが、menuSmallが再計算されず、すべての画面のサイズ変更が再実行されないためです。この作業を行うには、Vueインスタンスの 'マウントされた'ライフサイクルに配置する必要がありますか？

ありがとうございました！

Answer 1

xs10はxs10をクラスとしてではなく属性として<v-flex>に適用する必要があります。

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

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

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

Answer 2

これは

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

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