Vue.js中Bootstrap模态框内vue-slick使用v-for循环显示异常如何解决

• vue-slick初始化计算轮播容器宽度、轮播项布局时，Bootstrap模态框正处于默认隐藏状态（display: none），slick无法获取正确的容器尺寸参数，就会出现布局错乱、轮播项堆叠的异常。
• 你在viewVehicle方法中给vehicles赋值后立刻打开模态框，此时v-for绑定的轮播项DOM还未完成渲染，slick读取到的轮播项数量有误，就算调用reSlick也会因为时机错误无法生效。
• 你把reSlick调用放在了updated钩子中，组件任意数据变更都会触发这个钩子，会导致slick频繁重复初始化，反而加重渲染异常。

按以下步骤修改代码即可修复问题：

1. 先删除updated钩子中调用reInit()的代码，避免无意义的频繁重初始化。
2. 监听Bootstrap模态框的shown.bs.modal事件，该事件会在模态框完全显示、DOM渲染完成后触发，此时再配合$nextTick确保轮播项全部渲染完成后调用reSlick。
3. 修改viewVehicle方法，参考代码如下：

viewVehicle(vehicles) {
    this.vehicles = vehicles
    const modal = $('#viewVehicle')
    // 先解绑之前的事件避免重复绑定
    modal.off('shown.bs.modal')
    modal.on('shown.bs.modal', () => {
        // 等待v-for的DOM渲染完成再重初始化slick
        this.$nextTick(() => {
            this.$refs.slickone?.reSlick()
        })
    })
    modal.modal('show')
}

4. 可选优化：给slick组件加判断，只有轮播数据存在时才渲染，避免空数据初始化异常：

<slick 
    v-if="vehicles.length" 
    ref="slickone" 
    :options="slickOptions"
>
    <div v-for='vehicle in vehicles' :key="vehicle.id">
        <img :src="vehicle.vehicle_image_url">
    </div>
</slick>

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