iview中结合ajax使用Menu组件无法正确设置active-name属性

我想利用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钩子当中

阅读 8.1k
2 个回答

已解决,使用$refs设值或方法即可。

<i-menu ref="contactMenu" 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();  
          _this.$nextTick(function() {
            _this.$refs.contactMenu.updateOpened();
            _this.$refs.contactMenu.updateActiveName();
          }); 
    }
})

对组件理解还需加深,如有必要可阅读iview源码,这样使用更为灵活

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题