问题描述

使用Vue的v-for嵌套，渲染出来的元素，第一个没有问题，第二个不相应点击事件。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

            <li class="layui-nav-item" v-for="menu in menus">
                <a href="javascript:;" v-bind:data-url="menu.url" data-name="form" kit-loader><i v-bind:class="menu.icon" aria-hidden="true"></i>
                    <span> {{ menu.name }}</span>
                    <span class="layui-nav-more"></span>
                </a>
                <dl class="layui-nav-child" v-for="sub_menu in menu.childMenus">
                    <dd>
                        <a href="javascript:;" kit-target v-bind:data-url="sub_menu.url">
                            <i aria-hidden="true" v-bind:class="sub_menu.icon"></i><span> {{ sub_menu.name }}</span></a>
                    </dd>
                </dl>
            </li>
            
            
var menuList = new Vue({
    el:'#menu_list',
    data: {
        menus :  
        [{
            "icon": "fa fa-tasks",
            "id": "WORK_TASK",
            "name": "工作任务",
            "order": 0,
            "url": "create_task",
            "childMenus": [{
                "icon": "fa fa-crosshairs",
                "id": "CREATE_TASK",
                "name": "任务管理",
                "order": 0,
                "parentId": "WORK_TASK",
                "url": "create_task"
            }]
        }]
    }
})

你期待的结果是什么？实际看到的错误信息又是什么？

第一个li的菜单可以折叠和展开，第二个不行。