<div class="sidebar-nav">
<ul id="menu2" class="menu2">
<li v-for="(item,index) in data">
<a href="javascript:;" class="maintitle">{{item.name}}
<span class="float" v-if="item.children.length>0">
<i class="fa fa-angle-right" aria-hidden="true" v-if="item.isleaf"></i>
<i class="fa fa-angle-down" aria-hidden="true" v-else></i>
</span>
</a>
<ul class="subtitle">
<li v-for="(i,j) in item.children">
<a href="javascript:;"> {{i.name}}
<span class="float" v-if="i.children.length>0">
<i class="fa fa-angle-right" aria-hidden="true" v-if="i.isleaf"></i>
<i class="fa fa-angle-down" aria-hidden="true" v-else></i>
</span>
</a>
<ul>
<li v-for="(e,q) in i.children" :class="{active:index==data[index].children[j].children[q].dynamic}" @click="select(index,j,e.id,q)">
<a href="javascript:;" >{{e.name}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
// javascript代码
export default {
name: 'testItem',
data(){
return{
dynamic:-1;
data:[
{
id: "1000066",
parentid: "0",
name: "首页",
level: 1,
isleaf: false,
sort: 0,
children: [{
id: "1000053"
parentid: "1000066"
name: "首页"
level: 2
isleaf: false
sort: 1
children: [{
id: "1000053"
parentid: "1000066"
name: "首页"
level: 3
isleaf: false
sort: 1
}]
}]
}
]
}
},
methods: {
//选中样式
select(index,j,item,q){
var self = this;
self.data[index].children[j].children[q].dynamic= index;
},
}
}
/* 部分内容 添加完成active 还需要循环删除已经添加过的active*/