vue项目中使用swiper遇到的一些坑

前言

今天在vue项目中需要实现一个轮播的效果,于是便想到了使用swiper,以下是使用过程中遇到的两个问题。

一、引入swiper时报错 Cannot assign to read only property ‘exports’ of object ‘#

原因:transform-runtime adds import to your files

解决

删除babelrc的插件一项的transfrom-runtime

二、v-for渲染数据时,swiper失效

v-for渲染数据,swiper轮播失效

使用 $nextTick

在$nextTick回调函数中初始化swiper

$nextTick 和 nextTick

nextTick 表示数据更新之后的回调函数

$nextTick 表示数据渲染完成后的回调函数