如何通过vue对点击循环渲染的组件class添加active

<button v-for='date in dates' v-on:click="active(date.id)" v-bind:class="{ active: date.id == ins }" class="date list-group-item">{{ date.date }}</button>

 上图为元素的代码。

为点击事件绑定函数，参数也可以是数组index：

v-on:click="active(date.id)"

为active的有无添加判断，当该元素的唯一标识（如index或数组元素的其他唯一标识）与date中数据一样时有active

v-bind:class="{ active: date.id == ins }"

new Vue({
    el: '#example',
    data: {
        date_id: 0,
        dates: [{id : 0, date : '2020.2'}, {id : 1, date : '2020.3'}]
    },
    methods: {
        active(date_id) {
            this.date_id = date_id;
        }
    }
});