vue實(shí)現(xiàn)點(diǎn)擊顏色變化報(bào)錯

我用better-scroll做了一個橫向滾動選擇新聞類型的demo，但是在點(diǎn)擊使得相應(yīng)樣式改變時(shí)有一些問題。
我的思路是這樣的：li是v-for遍歷出來了的，我用了一個isActive來記錄被點(diǎn)擊的li的索引，當(dāng)點(diǎn)擊時(shí)就改變isActive的值為這個被點(diǎn)的li的index。然后動態(tài)數(shù)據(jù)綁定class使得相應(yīng)的li會被加上.active這個class使得樣式改變。
但是現(xiàn)在有問題就是點(diǎn)擊時(shí)達(dá)不到效果，我控制臺輸出index的值與isActive的值的到都是undfined

以下是代碼：

html：

<ul ref="slider">
      <li v-for="(type, index) in newsType" :key="type.id" @click.stop.prevent="beActive(index)" :class="{'active':index === isActive }">{{type}}</li>
</ul>

js部分：

  data () {
      return {
      newsType: ['要聞', '軍事', '財(cái)經(jīng)', '民生', '國際', '體育', '科技', '教育', '環(huán)境'],
      isActive: 0,
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  methods: {
      _initScroll () {
      this.sliderType = new BScroll(this.$refs.container, {
        scrollX: true,
        scrollY: false,
        momentum: false,
        useTransition: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true
      })
    },
      beActive (event, index) {
      // 不是better-scroll派發(fā)的事件,是原生的
      if (!event._constructed) {
        console.log('index=' + index)
        this.isActive = index
      }
      console.log(this.isActive)
    }
},

css:

.active {
  color: white;
  border-bottom: 1px solid white;
}

請問問題在哪，better-scroll的橫向滑動效果有，應(yīng)該不是那里的問題