鍍金池/ 問答/HTML/ vue點擊某一個子組件高亮，其他子組件不高亮

vue點擊某一個子組件高亮，其他子組件不高亮

想在一個樹形列表里實現(xiàn)點擊某一個節(jié)點，只有被點擊的節(jié)點高亮（邊框為紅色）。
我在實現(xiàn)的過程中，是寫了兩個組件來實現(xiàn)整體樹形列表和具體子節(jié)點。實現(xiàn)思路是在父節(jié)點定義一個border的值傳遞到子節(jié)點，與子節(jié)點的style的border綁定，當(dāng)點擊節(jié)點事件發(fā)生時，先將事件發(fā)生的消息回傳給父節(jié)點，將全部子節(jié)點的border樣式統(tǒng)一定義為空，再通過document.getElementsByClassName修改被點擊子節(jié)點的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>

結(jié)果卻只有第一次點擊可以高亮，再次點擊就沒有反應(yīng)了，也沒有報錯~不知道該怎么辦？求助各路大神指點一二

clipboard.png

回答
編輯回答
伴謊
data(){
    highLightIndex: 0
},
method: {
    handleClick(index) {
        this.hightLightIndex = index
    }
}

然后你的循環(huán)的標簽的:v-for="(service, index) of service_show_list" class={{ 'highLight': hightLightIndex == index }} @click="handleClick(index)"

2017年6月17日 03:00