Vuetify 断点在 Nuxt.js 中不起作用

我正在使用一个项目Nuxt.js作为 SSR 发动机和Vuetify作为样式框架。在我的模板之一中，我有这样的代码：

<v-layout row wrap align-center 
 :class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>

如你所见，我想申请mb-4仅当我在小屏幕和更小的屏幕上时才上课。但是，当我在桌面大屏幕上加载它并检查元素时，即使屏幕分辨率与应用此类的逻辑不匹配，也会附加此类。但是，当我调整浏览器窗口大小时，样式又回到了预期。

我尝试过手动发送'resize'生命周期钩子中的事件：

mounted() {
   window.dispatchEvent(new Event('resize')); 
}

但这没有帮助。即使我把它包裹起来setTimeout，仍然没有运气。

UPD:找到了解决方法，但仍然认为这不是最好的解决方案： 改变了

:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"

to

:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"

and in mounted添加了生命周期挂钩：this.isMounted = true

更新：在挖掘 Vuetify 源代码时发现，它检查窗口宽度有 200 毫秒的延迟，因为窗口宽度检查是昂贵的操作。这就是我们延迟的原因。

您可以为边距和填充属性指定特定的断点。

<v-layout row wrap align-center class="mb-sm-4">...</v-layout>

https://vuetifyjs.com/en/styles/spacing/#breakpoints https://vuetifyjs.com/en/styles/spacing/#breakpoints