vue踩坑系列——swiper
在vue项目中，引入swiper后，会报下面这个错误
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
项目代码是
{{item.text}}
百度后，是根目录下babelrc文件里的plugins的问题，将里面的transform-runtime删除就好
引入成功之后开始使用swiper又遇到开启loop后，会出现空白页的问题
代码如下：
解决办法是调取methods中的swiper1方法需要在updated钩子中调用
如下：
export default {name: 'topImg',data() {return {items: [{backgroundImage: ''},{backgroundImage: ''},{backgroundImage: ''}]}},mounted() {var _this = this;this.$axios({method: 'post',url: 'hmj/banner/bannerList',data: {bannner_id: 12}}).then(function(response) {var dr = response.data.result;_this.items[0].backgroundImage = 'url(http://imgpb.hmjshop.com/' + dr.img1 + ')';_this.items[1].backgroundImage = 'url(http://imgpb.hmjshop.com/' + dr.img2 + ')';_this.items[2].backgroundImage = 'url(http://imgpb.hmjshop.com/' + dr.img3 + ')';/*_this.swiper1();*/})},updated() {this.swiper1();},methods: {swiper1: function() {new Swiper('.swiper-container',{dircetion: 'horizontal',loop: true,autoplay:2000})}}
}如此，就可解决出现空白页的问题
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！