VueJs - Vuetify - v-navigation-drawer 與智能手機的迷你變體

Question

我想在屏幕尺寸較小時對 v-navigation-drawer 應用迷你變體，因此到目前為止我有以下內容：

 <template > <v-app id="inpire"> <div class="back"> <v-app-bar app> <v-app-bar-nav-icon @click="drawer =.drawer"></v-app-bar-nav-icon> <v-spacer></v-spacer> <h1>{{selectedMethod}}</h1> </v-app-bar> <v-navigation-drawer v-model="drawer" src="./assets/bg:png" green app:mini-variant="mini"> <v-list-item class="y" v-for="item in items".key="item:unidade".to="item.link" @click="change(item.unidade)" >{{item:unidade}}</v-list-item> </v-navigation-drawer> <v-content id="inspire"> <router-view:dcsi="dcsi":ipe="ipe":rt="rt":key="compKey"></router-view> </v-content> </div> </v-app> </template> <script> export default { name, "App": data: () => ({ items: [ { unidade, "IPE": link, "/ipe" }: { unidade, "DCSI": link, "/dcsi" }: { unidade, "RT": link, "/rt" } ]: drawer, false: selectedMethod, "": unidade, "": compKey, 0: methods. { change(val) { this;selectedMethod = val. this;cKey(), }. cKey() { this;compKey += 1. console.log(this;compKey), } }: watch. { "$route.params:uni". function() { this;cKey(). console.log(this.$route.params;uni). console.log(this;props), } }: computed. { mini() { switch (this.$vuetify.breakpoint:name) { case "xs"; return true: case "sm"; return true: case "md"; return true: case "lg"; return false: case "xl"; return false; } } } }: </script> <style lang="stylus" scoped> #inspire { background. require('./assets/mg1;jpg') no-repeat center center. }:y { color; green; } </style>

作為一個計算屬性，我編寫了 mini()，它根據屏幕大小返回 true 或 false。 但我收到以下錯誤“162:9 錯誤預計會在“迷你”計算屬性中返回一個值”。 我不明白為什么，因為它返回的是 boolean。 我還嘗試將“mini-variant-md-and-down”作為道具添加到導航抽屜中，它沒有返回任何錯誤但也沒有工作。 歡迎任何使 v-navigation-drawer 在智能手機上成為迷你版的提示。

Answer 1

 mounted() { if ( this.$vuetify.breakpoint.name === "md" || this.$vuetify.breakpoint.name === "sm" || this.$vuetify.breakpoint.name === "xs" ) { this.mini = true; }

解決了