swiper动态改变

Question

监听子组件触发的函数然后接受参数动态改变数组swiperSlides,结果是数组改变了但是swiper内容没有刷新

Answer 1

应该在子组件里面watch下传递的参数,然后添加事件

Answer 2

数组是怎样改变的？用索引直接设置一个项时，如：this.items[indexOfItem] = newValue,这样是不会触发状态更新的。数组更新检测

Answer 3

检查一下 this 是否是 Vue 实例

Answer 4

我理解你问题是数据更新但是轮播并未更新，你可以试一下swiper.appendSlide(slide)方法去添加slide元素。

data.map(el=>{
    let slide = `<div class="swiper-slide"><img class="banner-img" src="${el.image}" alt="${el.title}"></div>`;
    this.swiper.appendSlide(slide)
});