vue点击某一个子组件高亮，其他子组件不高亮

Question

想在一个树形列表里实现点击某一个节点，只有被点击的节点高亮（边框为红色）。
我在实现的过程中，是写了两个组件来实现整体树形列表和具体子节点。实现思路是在父节点定义一个border的值传递到子节点，与子节点的style的border绑定，当点击节点事件发生时，先将事件发生的消息回传给父节点，将全部子节点的border样式统一定义为空，再通过document.getElementsByClassName修改被点击子节点的border样式。

树形列表组件：

<!--div-->
<div class="box-container-a">
    <service-box v-for="service in service_show_list" :service-info="service" :service-border="border"></service-box>
</div>
<!--script-->
<script>
export default {
    data (){
        return {
            border:''
        }
    },
    mounted() {
        messageBus.$on('update-tree-border',(count) =>{
             this.border = ''; 
        });
    }
}
</script>

service-box组件：

<!--div-->
<div class="boxContainer">
    <div class="servicebox" @click="addMarker" :style="{'border':serviceBorder}">
        <a >{{serviceInfo.Title | LongStringFilter }}</a>
        <a @click="openFolder" class="folder">{{open ? '<<'+'hide layers': 'show layers>>'}}</a>
    </div>
</div>

<!--script-->
<script>
export default {
    prop:['serviceInfo','serviceBorder'],
    methods:{
        addMarker(){ 
           var par = 1;
           messageBus.$emit('update-tree-border',par); 
           let btn = document.getElementsByClassName('servicebox');
           btn[0].style.border = '1px solid red';
        }
    }
}
</script>

结果却只有第一次点击可以高亮，再次点击就没有反应了，也没有报错~不知道该怎么办？求助各路大神指点一二

Answer 1

data(){
    highLightIndex: 0
},
method: {
    handleClick(index) {
        this.hightLightIndex = index
    }
}

然后你的循环的标签的:v-for="(service, index) of service_show_list" class={{ 'highLight': hightLightIndex == index }} @click="handleClick(index)"