vue绑定数据源后标签内事件会丢失,需要在mounted钩子中进行重新调用事件.
在metronic_v5.3中,布局对象被定义为mLayout,重新初始化对象方法即可.
代码如下
new Vue({
el: '#indexPage',
data: {
subsystemList: []
},
mounted: function () {
var self = this;
self.subsystemList=jeasyAjax("subsystem/tree.json");
mLayout.initAside();
mLayout.initHeader();
}
});
vue嵌套循环代码如下
以下为循环左侧三级菜单代码
<li v-for="subsystem in subsystemList" class="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover" >
<a href="javascript:;" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-list-3"></i>
<span class="m-menu__link-text" v-text="subsystem.menuName"></span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--parent" aria-haspopup="true">
<span class="m-menu__link">
<span class="m-menu__link-text" v-text="subsystem.menuName"></span>
</span>
</li>
<li v-for="menu in subsystem.menuList" class="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<a href="javascript:;" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text" v-text="menu.menuName"></span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu ">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li v-for="childMenu in menu.childMenuList" class="m-menu__item " aria-haspopup="true">
<a :href="'javascript:loadMenu(\''+childMenu.menuUrl+'\')'" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text" v-text="childMenu.menuName"></span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
注意 vue在同一页面下只能实例化一个vue,不可实例多个vue.
