我想利用ajax请求获取数据,之后使用v-for指令渲染Menu组件,现在有一个需求是默认刷新页面时选定第一个菜单,于是我在ajax请求回调函数中设置active-name和open-names属性,但是均无法触发默认选中效果,请问这是为什么?
html:
<i-menu theme="dark" width="auto" style="height: 1000px;opacity: 0.9;position: relative;" @on-select="chooseContact" :open-names="initialActiveSubMenu" :active-name="initialActiveMenu">
<Submenu :name="contactDepartment.department_name" v-for="contactDepartment in contactsListDepartment" :key="contactDepartment.department_name">
<template slot="title">
<Icon type="person-stalker"></Icon>{{contactDepartment.department_name}}
</template>
<Menu-item :name="contact.id" v-for="contact in contactDepartment.department_man" :key="contact.id">{{contact.name}}</Menu-item>
</Submenu>
</i-menu>
ajax请求:
axios.get("GetManGroupByDepartmentServlet").then(function(res){
if(res.data.data.length > 0){
_this.contactsListDepartment = res.data.data;
_this.initialActiveSubMenu.push(_this.contactsListDepartment[0].department_name);
_this.initialActiveMenu = _this.contactsListDepartment[0].department_man[0].id.toString();
}
})
PS:ajax请求写在created钩子当中
已解决,使用$refs设值或方法即可。
ajax请求回调:
对组件理解还需加深,如有必要可阅读iview源码,这样使用更为灵活