Vuetify3搜索页面调窗口至最小宽度时出现clientWidth读取错误

我用Vue+Vuetify搭建了基础搜索页面，npm run serve启动后功能完全正常，但打开开发者工具把窗口宽度拉到最小的时候，会抛出如下错误，怀疑是Vuetify的深层Bug。

错误信息 #

Cannot read properties of undefined (reading 'clientWidth')
TypeError: Cannot read properties of undefined (reading 'clientWidth')
    at calculateUpdatedOffset (webpack-internal:///./node_modules/vuetify/lib/components/VSlideGroup/helpers.mjs:21:53)
    at eval (webpack-internal:///./node_modules/vuetify/lib/components/VSlideGroup/VSlideGroup.mjs:133:105)

错误截图 #

页面模板代码 #

<template>
  <v-container class="mb-16">
    <p class="text-h4">Search</p>
    <v-sheet max-width="500" class="mx-auto">
    <v-form v-model="valid">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="searchTerms"
              label="search authors and books"
            ></v-text-field>
          </v-col>

          <v-col
            cols="12"
            md="6"
          >
            <v-btn block class="mt-2" @click="requestData()">Submit</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    </v-sheet>
    <v-pagination v-model="page" :length="this.pages.length"></v-pagination>
    <v-alert
        v-if="this.alert"
        :type="this.alertType"
        title="Alert"
        :text="this.alertMessage"
    ></v-alert>
    <v-row>
      <v-col cols="12" sm="6" md="4" v-for="(book, index) in this.pages[this.page - 1]" :key="index">
        <BookComponent 
          :title="book.volumeInfo.title" 
          :author="getValue(book.volumeInfo, 'authors[0]')" 
          :cover="getValue(book.volumeInfo, 'imageLinks.thumbnail')" 
          :pageCount="getValue(book.volumeInfo, 'pageCount')" 
          :searching="true"
          :keyId="index"
        />
      </v-col>
    </v-row>
  </v-container>
</template>

已排查：曾怀疑是<v-sheet>的max-width属性导致，移除后错误依旧。

修复方案 #

这个错误确实是Vuetify的VSlideGroup组件在极端窄窗口下的边界处理Bug，通常出现在组件切换为滑动模式时，DOM元素未正确初始化就尝试读取clientWidth。以下是几种可行的解决方式：

1. 升级Vuetify版本
   该Bug在Vuetify 3.x的早期版本中存在，后续官方补丁已修复。执行命令升级到最新稳定版：

   npm update vuetify
   

2. 给分页组件添加最小宽度
   窗口过小时v-pagination会自动启用滑动模式（依赖VSlideGroup），设置最小宽度可以避免组件进入异常渲染状态：

   <v-pagination 
     v-model="page" 
     :length="this.pages.length"
     style="min-width: 200px;"
   ></v-pagination>
   

3. 窗口过小时隐藏分页组件
   通过监听窗口宽度，在极端窄屏时暂时隐藏分页，避免触发Bug：

   <v-pagination 
     v-model="page" 
     :length="this.pages.length"
     v-show="windowWidth >= 300"
   ></v-pagination>
   

   需在Vue实例中添加窗口监听逻辑：

   export default {
     data() {
       return {
         windowWidth: window.innerWidth
       }
     },
     mounted() {
       window.addEventListener('resize', () => {
         this.windowWidth = window.innerWidth
       })
     },
     beforeUnmount() {
       window.removeEventListener('resize', () => {
         this.windowWidth = window.innerWidth
       })
     }
   }
   

内容的提问来源于stack exchange，提问作者ca1c