Vue.js中AJAX请求后重新加载carousel组件的方案求助

我碰到过好多次这种第三方轮播组件在动态更新数据后失效的情况，别担心，这本质上是因为很多carousel组件是基于初始DOM结构初始化的，当你通过AJAX异步加载数据、更新DOM后，组件没感知到变化，所以没法正常工作。下面给你两个针对性的解决方案：

方案一：通过key属性强制组件重新渲染 #

这是Vue里最通用的强制重新渲染组件的方法，原理是当key值变化时，Vue会销毁旧的组件实例并创建新的，这样新的轮播项就会被组件正确识别。

修改你的Carousel组件代码，给它加上一个基于数据长度的key：

<carousel 
  class="original-carousel" 
  :dots="false" 
  :nav="false"
  :key="originalGames.length" <!-- 新增这行 -->
>
  <router-link class="product-item" to="/product" v-for="product in originalGames">
    <!-- 你的轮播项内容保持不变 -->
  </router-link>
</carousel>

如果数据长度可能不变（比如每次加载的数量固定），你也可以单独声明一个refreshKey变量，每次数据更新时给它加1：

data(){
  return {
    sliderProducts: [],
    originalGames: [],
    todayHots: [],
    refreshKey: 0 // 新增变量
  }
},
created: function () {
  let th = this;
  axios.get('myAPIUrl').then((response) => {
    th.originalGames = response.data[2].items;
    th.todayHots = response.data[2].items_hot;
    th.refreshKey += 1; // 更新key值
  })
}

然后把Carousel的key绑定到refreshKey即可： :key="refreshKey"。

方案二：调用Carousel组件的原生刷新方法 #

如果你的Carousel组件（比如vue-carousel、Element UI的Carousel等）本身提供了刷新/初始化的API，那直接调用这个方法会更高效，不需要销毁重建组件。

首先给Carousel组件添加ref属性：

<carousel 
  class="original-carousel" 
  :dots="false" 
  :nav="false"
  ref="originalCarousel" <!-- 新增这行 -->
>
  <router-link class="product-item" to="/product" v-for="product in originalGames">
    <!-- 你的轮播项内容保持不变 -->
  </router-link>
</carousel>

然后在AJAX请求成功后，等待DOM更新完成，调用组件的刷新方法（注意：不同组件的方法名可能不同，比如有的叫refresh，有的叫init，请参考组件官方文档）：

created: function () {
  let th = this;
  axios.get('myAPIUrl').then((response) => {
    th.originalGames = response.data[2].items;
    th.todayHots = response.data[2].items_hot;
    // 等待DOM更新完成后执行，确保新的轮播项已经渲染到页面
    th.$nextTick(() => {
      // 调用组件的刷新方法，这里以refresh为例
      th.$refs.originalCarousel.refresh();
    })
  })
}

选择建议 #

• 如果你的Carousel组件没有提供刷新API，优先用方案一，简单可靠；
• 如果组件有官方的刷新方法，用方案二更高效，避免不必要的组件销毁重建。

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