Swiper 缩略图第一张图无法自动选中问题

swiper 官方缩略图示例。

https://swiperjs.com/demos#thumbs-gallery

打开 Vue3 示例，官方示例跑起来后可以看到第一张是选中的。

此时我们将 slide 改为动态数据，而不是固定的。

const list = reactive([
    'https://swiperjs.com/demos/images/nature-1.jpg',
    'https://swiperjs.com/demos/images/nature-2.jpg',
    'https://swiperjs.com/demos/images/nature-3.jpg',
    'https://swiperjs.com/demos/images/nature-4.jpg',
    'https://swiperjs.com/demos/images/nature-5.jpg',
])

<swiper-slide v-for="item in list" :key="item"><img :src="item" /></swiper-slide>

调整为动态数据，第一个缩略图仍然是选中的状态。接着再把 list 的数据改为延迟赋值（模拟接口返回的场景）。

此时发现，第一张没有默认选中了，点击第一张也不行，只能点击后面的，再点击第一张才能变为选中状态。

const list = reactive([])
setTimeout(function () {
    list.push(
        'https://swiperjs.com/demos/images/nature-1.jpg',
        'https://swiperjs.com/demos/images/nature-2.jpg',
        'https://swiperjs.com/demos/images/nature-3.jpg',
        'https://swiperjs.com/demos/images/nature-4.jpg',
        'https://swiperjs.com/demos/images/nature-5.jpg'
    )
}, 1000)

通过查找文档，发现可以调用缩略图模块的 update 方法来更新选中。

let mainSwiper = null
const setMainSwiper = (swiper) => {
    mainSwiper = swiper
}
setTimeout(function () {
    list.push(
        'https://swiperjs.com/demos/images/nature-1.jpg',
        'https://swiperjs.com/demos/images/nature-2.jpg',
        'https://swiperjs.com/demos/images/nature-3.jpg',
        'https://swiperjs.com/demos/images/nature-4.jpg',
        'https://swiperjs.com/demos/images/nature-5.jpg'
    )
    nextTick(function () {
        mainSwiper.thumbs.update()
    })
}, 1000)

测试以上方案可以让缩略图第一张选中。