Vue v-for两层嵌套第二个元素事件失效

Question

问题描述

使用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的菜单可以折叠和展开，第二个不行。

Answer 1

搞定了，Vue new的时候data元素多设置几个。
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：

vm.b = 'hi'
那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

对于界面上的元素列表也需要这样？data里面定义的时候只有一个元素，后面增加的也不会得到渲染。
定义的时候里面放十个，动态获取到列表后全部删除，0~9之内的则会被渲染。