v-for循环的时候使用swiper失效问题

记录一下最近工作中遇到的问题，需求是在列表里面再加入一个swiper去实现拖动效果，一开始想着很简单，就再v-for循环的时候拿item里面的数组再去swiper里面循环就可以了，就像这样

 <div class="listBox" v-for="(item,i) in serveList" :key="item.id">
               <div class="list-item" ><i class="icon"></i><div class="list-item-test" :title="item.name">{{ item.name }}</div></div>
               <div class="list-item-right">
                  <div class="swiper" ref="mysiper">
                     <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(child,index) in item.strategyDevVOS" :key="child.id">
                           
                        </div>
                     </div>
                  </div>
               </div>
            </div>

 new Swiper('.swiper', {
                slidesPerView: 8,
                loop: false,
                slidesPerView: 'auto',
                spaceBetween: 0,
                paginationClickable: true,
                observer:true,
                observeParents:false,//修改swiper的父元素时，自动初始化swiper 
                // 如果需要分页器
                // pagination: ".swiper-pagination",
                // 如果需要前进后退按钮
               

                // nextButton: ".swiper-button-next",
                // prevButton: ".swiper-button-prev",
                // 如果需要滚动条
                // scrollbar: '.swiper-scrollbar',
                //如果需要自动切换海报
                // autoplay: 1000, //自动修改延迟的时间
                // autoplayStopOnLast: true,
         });

但是，这样写呢页面没有报错，也正常渲染出来了，但是不能左右拖动，打开f12发现.swiper的div是没有正常渲染的，这就跟需求就不一样了，后面单独把swiper拿出来，就可以正常的拖动，但是放入到循环里面就不行了，想了一下觉得应该是swiper只注册了一次，没有注册多次造成的 就修改了一下代码如下

<div class="listBox" v-for="(item,i) in serveList" :key="item.id">
               <div class="list-item"  @click="toBusiness(item)"><i class="icon"></i><div class="list-item-test" :title="item.name">{{ item.name }}</div></div>
               <div class="list-item-right">
                  <div :id="`swiper${i}`" ref="mysiper">
                     <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(child,index) in item.strategyDevVOS" :key="child.id">
                        </div>
                     </div>
                  </div>
               </div>
            </div>

for(var i = 0; i< this.serveList.length;i++){
         new Swiper(`#swiper${i}`, {
                slidesPerView: 8,
                loop: false,
                slidesPerView: 'auto',
                spaceBetween: 0,
                paginationClickable: true,
                observer:true,
                observeParents:false,//修改swiper的父元素时，自动初始化swiper 
                // 如果需要分页器
                // pagination: ".swiper-pagination",
                // 如果需要前进后退按钮
               

                // nextButton: ".swiper-button-next",
                // prevButton: ".swiper-button-prev",
                // 如果需要滚动条
                // scrollbar: '.swiper-scrollbar',
                //如果需要自动切换海报
                // autoplay: 1000, //自动修改延迟的时间
                // autoplayStopOnLast: true,
         });
      }

动态去添加id，然后循环注册的时候动态获取到id，从而让每次循环出来的swiper都是唯一的，然后再打开页面，swiper就正常可以拖动了。

另外在记录一个工作中发现的问题：css里面 opacity会影响到z-index的层级，如果要使用z-index去设置层级的话不要使用opacity去控制透明度！！！！