vue.js - 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钩子当中

解决方案

已解决，使用$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源码，这样使用更为灵活

这篇关于vue.js - iview中结合ajax使用Menu组件无法正确设置active-name属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！