Question

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

如果在md上，抽屉将切换为mini。如果用户单击侧面图标，则迷你按钮会切换回抽屉

如果在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>

我用到目前为止的内容创建了一个Codepen：

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

Answer 1

您正在尝试为其自身分配一个计算属性：

@click.stop="mini != mini"

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

如果要计算mini来确定<navigation-drawer>是否缩小，请为信息使用两个单独的占位符：

一个用于确定菜单是否被强制打开（称为menuOpen）的方法，该菜单最初在data()中定义为false，然后被您的@click.stop="menuOpen != menuOpen"覆盖
和一个来自$vuetify.breakpoint.mdAndUp的人。称为mdAndUp。

因此您的mini变为：

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

here看到它。

Answer 2

问题是您试图修改计算的属性mini。

要变异计算所得的属性，您需要提供一个computed setter：

computed: {
    mini: {
        get() {
           // get logic
        },
        set(value) {
           // set logic
        }
    }
}

在您的情况下，如果基于mini，则计算属性$vuetify.breakpoint.mdAndDown返回true或false。您需要添加一个新变量，例如overwriteBreakpoint，然后在设置器中使用它。

data() => ({
    overwriteBreakpoint: true
}),
computed: {
    mini: {
        get() {
           return this.$vuetify.breakpoint.mdAndDown || this.overwriteBreakpoint;            
        },
        set(value) {
           this.overwriteBreakpoint = value;
        }
    }
}

下面是一个示例：https://codepen.io/dormenog/pen/MddbMY?editors=1011

更新：

要在多种屏幕尺寸上使用此功能，您需要针对何时导航栏的每个道具应为true或false提出明确的规则。这将变得非常混乱，非常迅速，并且跟踪状态的好处并不是很有价值，因为屏幕不会在用户设备上实时更改大小。

我建议您将导航栏的内容分成一个组件，并用多个<v-navigation-drawer />包裹起来，这些v-if仅在屏幕大小正确时才由vue呈现。可以使用v-else和function concatArray(arr_1, arr_2) { return [].concat(arr_1, arr_2) // eq return arr_1.concat(arr_2) } var array1 = [1, 3, 7]; var array2 = [12, 21, 42]; var array3 = concatArray(array1, array2); console.log('array1',JSON.stringify(array1)); console.log('array2',JSON.stringify(array2)); console.log('array3',JSON.stringify(array3));来实现。

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

2 个答案: