vue九宮格ランダム抽選

.cj_box {
    width: 300px;
    display: block;
    margin: 0 auto;
  }

  .line_item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: red;
    float: left;
  }

  .active {
    background-color: #fffea5 !important;
  }

  .white_item {
    background-color: #fff;
  }

data() {
    return {
      index: 3,    //          ，    
      count: 8,    //         
      timer: 0,    //        
      speed: 200,   //       
      times: 0,    //     
      cycle: 30,   //       ：                 
      prizes: 3,   //     
      prize: [0,1,2,3,4,5,6,7],   //     
    }
  },
   methods: {
    goLottery() {
    //                
      if(this.speed == 200) {
        this.prizes = this.prize[Math.floor((Math.random() * this.prize.length))]
        console.log(this.prizes)
        this.startRoll();
      }
    },
    //     
    startRoll() {
      this.times += 1  //     
      this.oneRoll()  //               ，           
      this.usePrize()
    },
    //      
    oneRoll() {
      let index = this.index  //          
      const count = 8  //         
      index += 1
      if (index > count - 1) {
        index = 0
      }
      this.index = index
    },
    usePrize() {
      //              &&             
      if (this.times > this.cycle + 10 && this.prizes === this.index) {
        clearTimeout(this.timer)   //        ，    
        this.times = 0
        this.speed = 200    //     
      } else {
        if (this.times < this.cycle) {
          this.speed -= 5   //       
        }
        this.timer = setTimeout(this.startRoll, this.speed)
      }
    }
  }