problem description
using the v-for nesting of Vue, the rendered element has no problem with the first, and the second does not correspond to the click event.
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<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:"-sharpmenu_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"
}]
}]
}
})
what result do you expect? What is the error message actually seen?
the menu of the first li can be collapsed and expanded, but not the second.