Vue初學者，寫專案實現輪播圖時報錯且頁面初始化後不會自動輪播。

設定的計時器時長是6000，但報錯是幾乎沒有停歇的報錯。

檢查核心程式碼，發現

錯誤一：這裡導致輪播圖初始化不輪播

mounted的方法寫在了methods裡面，將mounted的方法挪出，解決頁面初始化輪播圖不切換的問題。

錯誤二：這裡導致報錯 Uncaught RangeError: Maximum call stack size exceeded 

方法寫錯了，應該是 return this.nowIndex +1

錯誤三：這裡導致不間歇的報錯

應該把inv的屬性設定寫在props裡面。

完整輪播圖實現如下：

檢視部分

<slide-show v-bind:slides="slides"></slide-show>

<script>
  import slideShow from '../components/slideShow'

  export default {
    components:{
      slideShow
    },
    data(){
      return{
        boardList:null,
        newsList:[],
        productList:null,
        slides: [
          {
            title: 'danceRobot',
            href:'detail/danceRobot',
            src: require("../assets/slideShow/pic1.jpg")
          },
          {
            title: 'EnglishLearningRobot',
            href:'detail/EnglishLearningRobot',
            src: require("../assets/slideShow/pic2.jpg")
          },
          {
            title: 'eyeCare',
            href:'detail/eyeCare',
            src: require("../assets/slideShow/pic3.jpg")
          },
          {
            title: 'serviceRobot',
            href:'detail/serviceRobot',
            src: require("../assets/slideShow/pic4.jpg")
          }
        ]

      }
    }
  }
</script>
 

元件部分

<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
    <div class="slide-img">
      <a :href="slides[nowIndex].href">
        <transition name="slide-trans">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>

        <transition name="slide-trans-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
      </a>
    </div>

    <h2>{{slides[nowIndex].title}}</h2>

    <ul class="slide-pages">
      <li @click="goto(prevIndex)">&lt;</li>

      <li v-for="(item,index) in slides" @click="goto(index)">
        <a :class="{on:index === nowIndex}">{{index +1}}</a>
      </li>

      <li @click="goto(nextIndex)">&gt;</li>
    </ul>
  </div>
</template>

<script>
  export default {
    props:{
      slides:{
        type:Array,
        default:[]
      },
      inv:{
        type:Number,
        default:6000
      }
    },

    data(){
      return {
        nowIndex:0,
        isShow:true
      }
    },
    computed:{
      prevIndex(){
        if(this.nowIndex === 0){
          return this.slides.length -1
        }else{
          return this.nowIndex -1
        }
      },
      nextIndex(){
        if(this.nowIndex === this.slides.length -1){
          return 0
        }else{
          return this.nowIndex +1
        }
      }
    },
    methods:{
      goto(index){
        this.isShow = false
        setTimeout(()=>{
          this.isShow = true
          this.nowIndex = index
        },10)
      },
      runInv(){
        this.invId=setInterval(()=>{
          this.goto(this.nextIndex)
        },this.inv)
      },
      clearInv(){
        clearInterval(this.invId)
      }
    },
    mounted(){
      this.runInv();
    }
  }
</script>

<style scoped>
  .slide-trans-enter-active {
    transition: all .5s;
  }
  .slide-trans-enter {
    transform: translateX(900px);
  }
  .slide-trans-old-leave-active {
    transition: all .5s;
    transform: translateX(-900px);
  }
  .slide-show {
    position: relative;
    margin: 15px 15px 15px 0;
    width: 900px;
    height: 500px;
    overflow: hidden;
  }
  .slide-show h2 {
    position: absolute;
    width: 100%;
    color: #fff;
    background: #000;
    opacity: .5;
    bottom: 0;
    height: 30px;
    text-align: left;
    padding-left: 15px;
  }
  .slide-img {
    width: 100%;
  }
  .slide-img img {
    width: 100%;
    position: absolute;
    top: 0;
  }
  .slide-pages {
    position: absolute;
    bottom: 10px;
    left: 480px;
  }
  .slide-pages li {
    display: inline-block;
    padding: 0 10px;
    cursor: pointer;
    color: #fff;
  }
  .slide-pages li .on {
    text-decoration: underline;
  }
</style>