vue.js 实现点击后动态添加 class 并删除同级 class

<div id = "prizeReport"><div class="swiper-container">
    <div class="swiper-wrapper type-nav clearfloat">
        <div class="swiper-slide type-nav-box" :class="type.selected ? 'active' : ''"
    v-for="(type, index) in types" v-on:click="choose(index)">
    <span class="underline">{{type.type}}</span>
        </div>
    </div>
</div></div>

(function () {
var prizeReport = new Vue({
el: '#prizeReport',
data: {
seen : true,
checkedColor : false,
types:[
{type:'全部', selected:true},
{type:'食品', selected:false},
                {type:'餐饮', selected:false},
            {type:'药品', selected:false},
            {type:'医疗器械', selected:false},
            {type:'化妆品', selected:false}
        ]
},
mounted: function () {
        this.$nextTick(function() {
    this.initSwiper();
    });
},
methods : {
/**
* 初始化轮播图
*/
initSwiper : function () {
var that = this;
var mySwiper = new Swiper('.swiper-container', {
width: window.screen.availWidth,
slidesPerView : 4,
});
},

choose:function (index) {
for (var i = 0; i < this.types.length; i++) {
this.types[i].selected = false;
}
this.types[index].selected = true;
       }
}
});
})();