Vue3 搭配SwiperJS：v-bind:class绑定不符合预期问题求助

问题原因 #

Swiper开启loop模式时会自动克隆首尾幻灯片，模板里用的数组index只对应原数据的索引，克隆出来的幻灯片会复用这个索引值，导致v-bind:class="{ '!h-auto': isDescriptionTaller(index) }"的判断逻辑和实际显示的幻灯片不匹配，出现类绑定错位的情况。

解决方案 #

放弃依赖数组索引的判断逻辑，直接通过Swiper实例和DOM元素的实际高度对比来动态控制类，具体步骤如下：

1. 声明Swiper实例引用，用于监听事件和操作幻灯片元素：

<script setup>
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

const swiperRef = ref(null)
const items = [
  // 你的幻灯片数据项
]

// 检查并设置幻灯片类
function setSlideAutoHeight() {
  if (!swiperRef.value) return
  // 过滤掉Swiper克隆的幻灯片（带swiper-slide-duplicate类）
  const realSlides = [...swiperRef.value.slides].filter(slide => !slide.classList.contains('swiper-slide-duplicate'))
  
  realSlides.forEach(slide => {
    const imgEl = slide.querySelector('img')
    const descEl = slide.querySelector('.description')
    // 对比描述区和图片的高度，动态添加/移除类
    if (descEl.offsetHeight > imgEl.offsetHeight) {
      slide.classList.add('!h-auto')
    } else {
      slide.classList.remove('!h-auto')
    }
  })
}

onMounted(() => {
  // 初始化完成后检查一次
  setSlideAutoHeight()
  // 监听幻灯片切换事件，每次切换后重新检查
  swiperRef.value?.on('slideChange', setSlideAutoHeight)
})
</script>

2. 修改模板，移除原有的v-bind:class绑定：

<template>
  <Swiper ref="swiperRef" :loop="true">
    <SwiperSlide v-for="(item, idx) in items" :key="idx">
      <div class="slide-container">
        <img :src="item.img" alt="" />
        <div class="description">{{ item.desc }}</div>
      </div>
    </SwiperSlide>
  </Swiper>
</template>

方案优势 #

• 直接基于DOM元素的实际高度判断，完全避开克隆幻灯片的索引错位问题；
• 幻灯片切换时自动重新计算，确保类的应用始终和当前幻灯片的内容高度匹配；
• 兼容Swiper的loop模式，无需关闭该功能影响用户体验。

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