vue-awesome-swiper 在vue中滑动的渲染问题

在vue中需要做一个调查问卷，可视区域只展示一题，题目可以左右滑动，也可以选中答案后自动跳转到下一题，除第一题外，其他题均有返回上一题按钮，最后做完答案提交后，有个重新测评，问题就出在这里，执行重新测评的时候，我将index索引置为了0，答案数组均设置为空了，但是在第一个题上选中后，进入下一题，滑动方向不对，而且穿透了，第一题没有选中，选中了最后一题，找了半天答案，发现是v-show的问题，我展示swiper的页面是用的v-show,后来改为了v-if就好了，但是原因我不太明白

<div v-show="showswipe">

<swipet :options="swiperOption" ref="myswiper">

<swiper-slide>

<input tpye="radio" v-model="arrs[0]" value="0a" name="1">

<input tpye="radio" v-model="arrs[0]" value="0b" name="1">

<input tpye="radio" v-model="arrs[0]" value="0c" name="1">

</swiper-slide>

<swiper-slide>

<input tpye="radio" v-model="arrs[1]" value="0a" name="2">

<input tpye="radio" v-model="arrs[1]" value="0b" name="2">

<input tpye="radio" v-model="arrs[1]" value="0c" name="2">

</swiper-slide>

<swiper-slide>

<input tpye="radio" v-model="arrs[2]" value="0a" name="3">

<input tpye="radio" v-model="arrs[2]" value="0b" name="3">

<input tpye="radio" v-model="arrs[2]" value="0c" name="3">

</swiper-slide>

</swiper>

<div @click="submitResult">提交</div>

//结果页

<div @click="reEvaluation" >重新测评</div>

</div>

 

<script>export default{

data(){ return {

swiperOption:{
    loop:false,
    preventClicksPropagation:false,
    observer:true,
    observeParents:true,
    on:{
        slideChangeTransitionEnd:function () {
            console.log('activeIndex',this.activeIndex)
            _self.questionIndex = this.activeIndex;
        }
    }
},
arrs:[],
questionIndex:0,

showswipe:true,

}},

methods:{

reEvaluation(){
for(let i= 0 ;i<3;i++){
    this.arrs[i] = ''
}
this.questionIndex = 0;
    this.showswipe = true;
    this.showResult = false;
},

}

}</script>

折腾了好久都不行，最后发现是v-show的原因，把v-show改为了v-if就可以了

<div v-if="showswipe">