将 Vuetify 导航抽屉切换为迷你，然后切换为临时

我在 Vue.js 中有一个项目，我正在使用 Vuetify。我有一个工具栏和导航抽屉。我想要的是在桌面上抽屉打开时。如果用户单击侧面图标，抽屉将切换为迷你。

如果打开 md，抽屉将切换至迷你。如果用户单击侧面图标，迷你会切换回抽屉

如果打开 sm 或降低导航抽屉切换到临时

我拥有大部分作品，但当我单击侧面图标时出现错误。Computed property 'mini' was assigned to but it has no setter.

这是我的代码：

<v-toolbar 
    :clipped-left="$vuetify.breakpoint.mdAndUp"
    :app="$vuetify.breakpoint.mdAndUp"
    :fixed="$vuetify.breakpoint.mdAndUp"
    flat 
    fixed
    :scroll-toolbar-off-screen="$vuetify.breakpoint.smAndDown"
    :scroll-threshold="50">

    <v-toolbar-side-icon @click.stop="mini = !mini">
    </v-toolbar-side-icon>

    <v-toolbar-title class="text-uppercase">
        <span class="font-weight-light">LOGO</span>
    </v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="">
        <v-btn icon v-for="item in menu" :key="item.icon">
            <v-icon>{{item.icon}}</v-icon>
        </v-btn>
    </v-toolbar-items>
</v-toolbar>

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    :permanent="$vuetify.breakpoint.mdOnly"
    :temporary="$vuetify.breakpoint.smAndDown"
    app
    hide-overlay>

    <v-list dense>
        <v-list-tile
            v-for="(item, index) in items"
            :key="index"
        >
            <v-list-tile-action>
                <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
        </v-list-tile>
    </v-list>
</v-navigation-drawer>

我已经用迄今为止所拥有的内容创建了一个代码笔：

https://codepen.io/jsd219/pen/gJJMPQ https://codepen.io/jsd219/pen/gJJMPQ

您正在尝试将计算属性分配给自身：

@click.stop="mini != mini"

你真的不想这样做。要找出原因，您需要阅读 JS setter 和 getter。

如果你想mini是计算出来的，它决定了你的<navigation-drawer>是否缩小，请为您的信息使用两个单独的占位符：

• 一个表示菜单是否被强制打开（称之为menuOpen），最初定义于data(), as false然后被你的覆盖@click.stop="menuOpen != menuOpen"
• 和一个来自$vuetify.breakpoint.mdAndUp。叫它mdAndUp.

So your mini变成：

  mini() {
    return !(this.mdAndUp|| this.menuOpen);
  }

See it here https://codepen.io/anon/pen/OYYbwE?editors=1010.