Nuxt + Vue + Vuetify：this.$vuetify.breakpoint 错误地初始化为“xs”

Question

使用 vuetify 断点在网站的移动和桌面布局之间切换

我的代码是（缩小（

        <v-layout wrap :column="mobile">
           .
           .
           components and stuff
           .
           .
        <v-layout>

        <script>
           .
           .
           computed: {
             mobile: function () {
               return ['xs', 'sm'].includes(this.$vuetify.breakpoint.name)
             }
           }
           .
           .
        </script>

所以我使用计算函数来确定客户端是否有小屏幕

我的问题是this.$vuetify.breakpoint.name最初设置为xs

我的解决方法目前有一种loaded方法，并且在顶层做

<v-app v-if="loaded"
  .
  .
    <v-layout>
      .
    </v-layout>
  .
  .
<v-app>

但现在我也必须用 <NoSsr>

是否有更正确的方法来正确加载组件，以便在页面完全加载后它们不会从 mobie 版本跳转到全尺寸版本？

Answer 1

这里建议的通用解决方法是使用mounted()钩子设置某种形式的标志，这些标志将在内部进行检查computed：

data: () => ({
  //  ...
  isMounted: false
}),
mounted() {
  this.isMounted = true;
},
// ...
computed: {
  mobile: function () {
      return this.isMounted && ['xs', 'sm'].includes(this.$vuetify.breakpoint.name);
  }
}

或者，您可以使用任何其他方式mobile detection尽早设置此标志。