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

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

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

如果打开sm或降低导航抽屉开关至临时位置

我有大部分的作品，但我得到一个错误，当我点击侧面图标<代码>计算属性“mini”已分配给，但它没有setter。

这是我的密码：

标志
{{item.icon}
{{item.icon}
{{item.title}

到目前为止，我已经用我所拥有的创建了一个代码笔：

---

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

mini

要更改计算属性，您需要提供：

在您的情况下，如果基于

$vuetify.breakpoint.mdAndDown

，则计算属性

mini

将返回true或false。您需要包含一个新变量，比如

overwriteBreakpoint

，并在setter中使用它

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

下面是一个例子：

更新：

要在多个屏幕尺寸上进行此操作，您需要对导航栏的每个道具何时应为

true

或

false

提出定义规则。这将变得非常混乱，非常迅速，并且跟踪状态的好处并不真正有价值，因为屏幕不会在用户设备上实时改变大小

---

我建议将导航栏的内容分离为一个组件，并用多个

将其包装起来，只有在屏幕大小正确的情况下，vue才会呈现这些组件。这可以通过使用

v-if

和

v-else

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

@click.stop="mini != mini"

你真的不想那样做。要了解原因，您需要阅读JS setter和getter

如果您希望计算

mini

，以确定您的

是否缩小，请使用两个单独的占位符作为您的信息：

• 一个用于确定菜单是否被强制打开（称之为

  menuOpen

  ），最初在

  data（）

  中定义为

  false

  ，然后被

  @单击覆盖。stop=“menuOpen！=menuOpen”

• 还有一个来自

  $vuetify.breakpoint.mdAndUp

  。称之为

  mdAndUp

因此，您的

mini

变为：

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

---

看到了。

实际上，在你发布之前，我刚刚添加了这一点。：）我不再得到错误，但当我点击侧面图标时，什么也没有发生。有什么想法吗？我可以不再使用：

@click.stop吗=“迷你=！是否在侧面图标上显示mini

？如果屏幕大小更改，但单击actionReload（重新加载）并再次检查时，computed（计算）属性不起作用：）。是修好了，太棒了！它几乎完全发挥作用。现在，当屏幕大小改变时，导航永远不会返回抽屉。这是关闭的。目标在桌面上，菜单打开，侧面图标将其切换为迷你。在md大小的设备上，菜单切换为mini，侧面图标将其切换回open，最后在sm和xs设备上，菜单关闭并转换为temporay。单击侧面图标时，菜单打开向右，当屏幕大小变为md时，菜单不会切换为mini。仅供参考：我在数据对象中更改了

menuOpen:true，

，这是简单的JavaScript逻辑，您可以自己做。我告诉过你潜在的问题是什么（你试图分配给一个getter）。我是来帮你学习的，但我不能被雇用。此外，考虑到代码的复杂程度，您的请求现在是您力所能及的。IMHO，你会从这里学到更多。如果你明天还不能用，我会回来帮你做任何你觉得太有挑战性的事情。

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