bootstrap-vue b-carousel新增图片后轮播slides不更新问题

问题现象 #

• 预期：向轮播绑定的图片数组动态追加地址后，轮播同步展示全部2张图片
• 实际：仅渲染初始加载的1张图片
• 已排除基础响应式问题：轮播绑定的id属性随数组长度动态计算，新增元素后id正确变为carousel2，证明Vue响应式更新正常

复现代码 #

模板部分 #

<b-carousel 
  v-model="active" 
  fade 
  :interval="1000" 
  :id="'carousel' + items.length" 
  indicators 
  controls 
  clajss="picture-viewer-carousbel"
>
  <b-carousel-slide 
    v-for="(item,index) in items" 
    :id="'slideId'+index" 
    :key="'slideId'+index" 
    :img-src="item" 
    img-width="100%"
  >
  </b-carousel-slide>
</b-carousel>

注：模板存在两处笔误：属性名clajss应为class，类名carousbel应为carousel，该笔误不触发本次核心问题，但会导致自定义样式失效。

组件逻辑部分 #

export default {
  name: 'App',
  data() {
    return {
      active: 0,
      items: ['https://picsum.photos/1024/480/?image=10']
    }
  },
  mounted() {
    this.items.push('https://picsum.photos/1024/480/?image=12')
  }
}

相关依赖版本 #

{
  "vue": "^2.6.14",
  "bootstrap": "4.5.3",
  "bootstrap-vue": "2.21.2"
}

问题原因 #

bootstrap-vue 2.x 版本的b-carousel组件在初始化挂载阶段会收集内部所有b-carousel-slide实例生成幻灯片列表，挂载完成后默认不会自动监听子幻灯片的增减重新收集列表，属于组件自身的实现限制，和Vue响应式机制无关。

解决方法 #

• 方法1：给轮播组件绑定随幻灯片总数变化的key，强制组件在幻灯片数量变化时重新渲染
  直接在b-carousel上新增:key="items.length"属性即可，数组长度变化时Vue会自动销毁旧的轮播实例、创建新实例，自动加载全部幻灯片，改动成本最低：

  <b-carousel
    v-model="active"
    fade
    :interval="1000"
    :id="'carousel' + items.length"
    :key="items.length"
    indicators
    controls
    class="picture-viewer-carousel"
  >
  

• 方法2：更新幻灯片数组后，手动调用组件内置的刷新方法重新收集幻灯片
  首先给轮播组件添加ref引用：<b-carousel ref="imgCarousel" ...>，之后在修改数组的逻辑后，等DOM更新完成调用refresh()方法：

  mounted() {
    this.items.push('https://picsum.photos/1024/480/?image=12')
    this.$nextTick(() => {
      this.$refs.imgCarousel.refresh()
    })
  }
  

• 方法3：如果需要批量增减幻灯片，优先使用数组整体赋值的方式更新items，不要逐次调用push/splice，更新后配合$nextTick调用一次refresh即可，减少不必要的重绘。

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