V-for 出三个div显示同行，然后想做出点击任意一个div行级元素都变色的需求

Question

小弟刚使用vue一周，这个问题确实是有点难住了。想问下这个地方如何实现v-for出的三个元素（名字和两个按钮），想实现：

1.点击这一行中三个元素的任意一个后单行变色
2.然后点其他行的元素时再其他行变色

现在只能实现点名字变色，点按钮没反应。下面代码大概的是这个意思

<template>
    <div class="page">
        <el-container>
            <el-aside style="width: 500px">
               <div
                    v-for="listt in List"
                    :key="listt.id"
                >
                    <div :class="{biubiubiu:i===listt.id}">
                        <div
                            @click="goInfo(listt.id)"
                            :key="listt.id"
                        >{{listt.name}}</div>
                        <div class="buttons">
                            <div class="button-a" style="float: left;">
                                <button @click="goA(listt.id)" >AAA</button>
                            </div>
                            <div class="button-b style="margin-left: 10px;">
                                <button @click="goB"
                                >BBB</button>
                            </div>
                        </div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>
 
<script>

export default {
    data() {
        return {
            List: [
                {id:1,name:qqq},
                {id:2,name:www},
                {id:3,name:eee}
            ],
         
        };
    },
    methods: {
       
    },
    created() {
     
    },
    mounted() {}
};
</script>

<style scoped>

.biubiubiu {
    color: #66b1ff;

}

</style>

Answer 1

其实你已经写出来了，只是你的方法没有完善，<div :class="{biubiubiu:i===listt.id}">上加上一个@click.stop="handleCheck(listt.id)" 然后再handleCheck(id){this.i=id?id:null},i是在data(){return{i:null}}