Vue三层嵌套循环实现active点击切换部分代码


<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*/


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM