javascript - vuejs如何实现被点击按钮添加addClass，上一次被点击过的removeClass

Question

代码如下：

<ul class="top_bar">
    <li class="top_cell"
        v-bind:class="cell.selected?'active':''"
        v-for="cell in cells"
        v-on:click="choose($index)">
        {{cell.num}}
    </li>
</ul>

new Vue({
    el:'.top_bar',
    data:{
        cells:[
            {num:'1',selected:true},
            {num:'2',selected:false},
            {num:'3',selected:false},
            {num:'4',selected:false},
            {num:'5',selected:false}
        ]
    },
    methods:{
        choose:function (index) {
            this.cells[index].selected=true;
        }
    }
});

这么写每次点击都会在当前点击的按钮添加active，但是上一次的active无法去掉，怎么解决？

Answer 1

如果要实现单选逻辑，只需要保存当前选中项的索引即可，没有必要使用数组和布尔值。
简单写一下代码供你参考：

<ul class="top_bar">
    <li class="top_cell"
        v-for="cell in 5"
        :class="{ 'active': cell === selected }"
        @click="choose(cell)">
        {{cell}}
    </li>
</ul>

new Vue({
    el:'.top_bar',
    data:{
        selected: null
    },
    methods:{
        choose:function (index) {
            this.selected = index
        }
    }
});

Answer 2

先遍历一遍cells把其他项的selected都置为false