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-2026 CODEPRJ.COM