vue.js - 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> 包裹整个东西

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

Answer 1

建议的通用解决方法 here正在使用 mounted() Hook 设置某种形式的标志，将在 computed 中检查:

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

或者，您可以使用任何其他方式尽早设置此移动检测标志。