Vuetify3 VSlideGroup组件点击图片报Cannot read properties of undefined错误

错误原因 #

你在v-slide-group内部嵌套了v-row，破坏了VSlideGroup的内部DOM结构。VSlideGroup组件要求直接子元素为v-slide-group-item，额外嵌套容器（如v-row）会导致组件计算居中偏移量时，无法正确获取目标元素的clientWidth属性，进而抛出该错误。

解决方案 #

移除v-slide-group内部的v-row，直接将v-slide-group-item作为v-slide-group的直接子元素。若需调整布局对齐，可通过VSlideGroup自身属性或给v-slide-group-item添加自定义样式实现。

修改后的代码：

<v-slide-group show-arrows center-active mandatory class="background-white justify-center">
  <v-slide-group-item 
    v-for="productVariant in productCard.variantsFiltered" 
    :key="productVariant"  
    v-slot="{ isSelected, toggle }"
  >
    <v-card :class="['ma-3', selectedClass]" height="52" width="50" @click="toggle">
      <div class="flex-column fill-height align-center ">
        <div class="cover">
          <v-img height="50" rounded @click="changeSrc(productVariant)"
          :src="productVariant.imagesURL[0]"></v-img>
        </div>
        <v-scale-transition>
          <div class="selected-color" v-if="isSelected"></div>
        </v-scale-transition>
      </div>
    </v-card>
  </v-slide-group-item>
</v-slide-group>

v-slide-group的justify-center类已可实现水平居中对齐，无需额外嵌套v-row。

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