Infinite menu implemented by Vue

Attention points

1: when clicking expand or hide, there will be event capture, so you need @ click.stop to prevent event capture

2: set a flag value of boolean in the acquired data to display or hide the function

3: infinite refers to recursive calling, which means that the component calls itself, so give the component a name corresponding to the file name

4: props has no data by default. It only has a value when it calls itself the second time, so you need to show the data by default

<template>
    <ul class="menuList" v-show='!expanded'>
        <template v-for="item in menus">
        <li :key="item.id" @click.stop="toggleChildren(item)">{{item.text}}
            <template v-if="item.children ? item.children.length : 0 ">
                <myNav :menusData="item.children" :expanded="item.expanded"></myNav>
            </template>
            <!--
            <ul v-if='item.children.length' v-show='item.expanded' class="childs">
                <li v-for='child in item.children'>{{child.text}}</li>
            </ul>
            -->
        </li>
        </template>
    </ul>
</template>

<script>
import menus from '../api/data.js';

export default {
    name:'myNav',
    data(){
        return {
            menus:[]
        }
    },
    props:['menusData','expanded'],
    methods:{
        toggleChildren: function(item) {
          
            item.expanded = !item.expanded;
        },
        getMenus(){
            this.menus = this.menusData ? this.menusData : menus;
            
            /*
            for(let i=0,l=menus.length;i<l;i++){
                let item = menus[i];
                let menusList = {};
                menusList['id'] = item['id'];
                menusList['text'] = item['text'];
                menusList['expanded'] = item['expanded'];
                this.menus.push(menusList);
            }
            */
        }
    },
    created:function(){
       this.getMenus();
    }
}
</script>

<style>
    ul{margin: 0;pad: 0;list-style: none;}
    li{padding: 10px 0 10px 10px;}
</style>

data.js

let menus = [
    {
        text:'Fruits',
        id:1,
        expanded:true,
        children:[
            {
                text:'Apple',
                id:10,
                expanded:true,
                children:[
                    {
                        id:101,
                        text:'Red Fuji'
                    },
                    {
                        id:102,
                        text:'Ankang'
                    }
                ]
            },{
                text:'Litchi',
                id:11
            },{
                text:'Grape',
                id:12
            },{
                text:'Pitaya',
                id:13
            }
        ]
    },{
        text:'Delicious',
        id:2,
        expanded:true,
        children:[
            {
                text:'sugar',
                id:21
            },{
                text:'bread',
                id:22
            },{
                text:'Ham',
                id:23
            },{
                text:'Potato chips',
                id:24
            },{
                text:'Broken surface',
                id:25
            }
        ]
    },{
        text:'Drinks',
        id:3,
        expanded:true,
        children:[]
    }
]

export default menus;