VUE使用dom点击单层数组、双层数组高亮问题uk组件

VUE里点击单层数组、双层数组高亮问题

a)点击各不干涉 b)第二次点击颜色消失
.vue.

 <ul class="uk-nav-default " uk-nav="multiple: true">                                      
       <li v-for="(resources,index) in resources" :key="index" class="uk-parent uk-				 text-truncate" >
       //一层
       <a class="lf-box-xian" @click="classlight1(index)" ref="classlight">&nbsp;&nbsp;&nbsp;&nbsp;{{resources.name}}</a>
       <ul class="uk-nav-sub">
           <li v-for="(items,indexer)  in resources.items" :key="indexer" class="uk-text-truncate">
           //二层
           <a class="lf-box-xian" @click="classjump(index,indexer,items)" :ref="'classlight1'+index+indexer">{{items.name}}</a>                       
           </li>
       </ul>
       </li>
   <li class="uk-margin-remove lf-box-add" >
       <a  uk-toggle="target: #add-class">添加班级</a>
   </li>   
</ul>

..js.

      //一层亮
        classlight1(m){
            if(this.$refs.classlight[m].style.color==""){
                //清除颜色
                for(let i of this.$refs.classlight){
                    i.style.color=""            
                 }
               this.$refs.classlight[m].style.color="red"
               //boo=ture;  

            }else{  
               this.$refs.classlight[m].style.color=""
            }
        },
       // 二层亮
        classjump(n,m){
            // console.log( Array.of(this.$refs))
            // console.log(this.$refs[classlight1])
            // console.log(n+''+m)
            // this.$refs['classlight1'+n+m][0].style.color='red'
            if(this.$refs['classlight1'+n+m][0].style.color==""){
                for(let i in this.$refs){                 
                    if(i.indexOf('classlight1')>-1){
                        this.$refs[i][0].style.color=""
                    }
                    // i['classlight1'+n+m][0].style.color="red"
                    // console.log(i['classlight1'+n+m][0].style.color)         
                 }
                    
                 this.$refs['classlight1'+n+m][0].style.color='red'
               //boo=ture;  

            }else{  
                this.$refs['classlight1'+n+m][0].style.color=''
            }
        },

主要原理是利用$refs获取dom对象的最高级样式进行操作。