最近遇到一个坑，swiper分页器不显示，swiper不能正常拖动切换

第一个坑：

vue中用swiper，swiper数据需动态渲染，那么也会出现标题的情况，不能拖动

附代码如下：

<div id="app">
	<!-- Swiper -->
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	    	<div class="swiper-slide" v-for="(item,index) in list"><img :src="item.url"/></div>
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination"></div>
	</div>
</div>

new Vue({
	el:'#app',
	data: {
		list:[],
		img: [
            {"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113055712.jpg"},
            {"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113234130.jpg"},
            {"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113354309.jpg"},
            {"url": "http://10.0.0.151:9080/files/SAPPO/ZY0002/20200526/202005261113422081.jpg"}
        ],
   },
   mounted: function() {	       		
		this.init();
	},
	methods:{
		init(){
			setTimeout(()=>{
				//模拟接口请求到的数据赋值
				this.list = this.img;
				 var swiper = new Swiper('.swiper-container', {
				      pagination: {
				        el: '.swiper-pagination',
				      }
				    });
			},2000)
		}
	}
})

查看元素，如下图

然后按照网上搜索的办法，添加监听父元素或者子元素改动，再重新实例化swiper

var swiper = new Swiper('.swiper-container', {
    pagination: {
    	el: '.swiper-pagination',
    },
	observer:true,//修改swiper自己或子元素时，自动初始化swiper
	observeParents:true//修改swiper的父元素时，自动初始化swiper
});	

基本上问题就已经解决了，但是~~~~我说的并不是这个坑

在实际的开发环境下，页面还会有其他数据渲染，其实swiper本身没有问题，就是其他代码影响了它，报错内容及元素审查节点如下

怎么都找不到问题，我也一直以为是引入了某个文件，影响了swiper；倒腾了一上午，自己写示例排除错误。一个一个文件引入，结果都没有问题；后来把html全部注释，只留下swiper的内容，结果一切正常，泪奔~~~

然后一点点解开注释，发现了问题

//我这样写，取serviceType数组第一个展示（数据正常的前提），影响了swiper报错
<p>配送方式：<span>{{coupon.serviceType[0].serviceName}}</span></p>
					

//结果我改成这样，swiper正常
<p>配送方式：<span v-for="(v,i) in coupon.serviceType">{{i==0?v.serviceName:''}}</span></p>

我有点无语，上面的写法本来就没错；记录下来，希望跟我遇到一样情况的程序猿能看到，少踩点坑·····