如何用vue.js给点过的li添加单独的class？

Question

如图，渲染出来的列表点击的时候需要单独给li添加一个class，但是我用v-bind:class的时候会导致全部li都被添加，如何设置data才能够让点击那个li单独添加class？

    <ul>
        <li  v-for="choice in choices" v-on:click="next($index)" >
             {{ choice.item }}
        </li>
    </ul>

var vq = new Vue({
    el: '.secondScene',
    data: {
        title: qdata[rnum].title,
        choices: qdata[rnum].content,
        ison:false
    },
    methods: {
        next: function($index) {
            this.ison = true;


        }

    }
})

Answer 1

data中创建一个属性i。
li注册一个click事件并把$index的值传进去，在这个事件中把i赋值为$index。
然后li的v-bind:class="{classname: i==$index}"

Answer 2

更新/2016-01-21 22:11

在论坛看了下,[看到另外个同样问题的发帖,不知道是不是你],

<li v-for="option in options" track-by="$index">
        <p :class="option.active==true?'text-success':''" v-on:click="addClass($index)">Text:{{option.text}}--Vlue:{{option.value}}
        </p>
</li>

这样是可行的,就是等在data数据的每一条事先给一个值为false的active键

---

写了个DEMO:https://jsfiddle.net/rainwsy/f48t2e91/

就是我为每个li添加了一个初始active为false,有点麻烦。晚上回去再研究看看有什么方法

Answer 3

<ul>

<li  v-for="(choice, index) in choices" @click="next(index)" :class="{activeClass: index == activeIndex}" >
     {{ choice.item }}
</li>

</ul>

var vq = new Vue({

el: '.secondScene',
data: {
    title: qdata[rnum].title,
    choices: qdata[rnum].content,
    activeIndex: 0
},
methods: {
    next: function(index) {
        this.activeIndex = index;
    }

}

})