最近遇到一個坑，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>

我有點無語，上面的寫法本來就沒錯；記錄下來，希望跟我遇到一樣情況的程序猿能看到，少踩點坑·····