vue实现点击颜色变化报错

Question

我用better-scroll做了一个横向滚动选择新闻类型的demo，但是在点击使得相应样式改变时有一些问题。
我的思路是这样的：li是v-for遍历出来了的，我用了一个isActive来记录被点击的li的索引，当点击时就改变isActive的值为这个被点的li的index。然后动态数据绑定class使得相应的li会被加上.active这个class使得样式改变。
但是现在有问题就是点击时达不到效果，我控制台输出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: ['要闻', '军事', '财经', '民生', '国际', '体育', '科技', '教育', '环境'],
      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派发的事件,是原生的
      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的横向滑动效果有，应该不是那里的问题

Answer 1

@click.stop.prevent="beActive(index)"

---》 @click.stop.prevent="beActive($event,index)"

这里改下试试。

Answer 2

因为你调用的时候只传了一个参数

@click.stop.prevent="beActive($event，index)"