iview 动态设置menu组件open-names，但是不起作用，如何解决？

Question

我在代码中动态设置了open-names，但是不起作用？

如：store.js

{
    state:{
        menu:{
            activeName:'4-1',
            openNames:['4']
        }
    }
}

MyComponents.vue

<Menu 
         
        theme="dark" 
        :active-name="menu.activeName" 
        :open-names="menu.openNames"
        @on-select="onSelect">
            <template v-for="menu in menu.list">
                <MenuItem v-if="!menu.children" :name="menu.id" :key="menu.id">
                    <Icon :type="menu.icon" :key="menu.id"></Icon>
                    <span class="layout-text" :key="menu.id">{{menu.name}}</span>
                </MenuItem>
                <Submenu v-if="menu.children" :name="menu.id" :key="menu.id">
                    <template slot="title">
                        <Icon :type="menu.icon"></Icon>
                        <span class="layout-text">{{ menu.name }}</span>
                    </template>
                    <template v-for="child in menu.children">
                        <MenuItem :name="`${menu.id}-${child.id}`" :key="child.id">
                            <Icon :type="child.icon" :key="child.id"></Icon>
                            <span class="layout-text" :key="child.id">{{ child.name }}</span>
                        </MenuItem>
                    </template>
                </Submenu>
            </template>
        </Menu>
        import { mapState,mapActions } from 'vuex'

    export default {
        components:{
            Bottom
        },
        data(){
            return{
                
            }
        },
        computed:{
            ...mapState([
                'logo',
                'menu',
                'breadcrumbs',
                'tags'
            ])
        },

Answer 1

解决了，配合js-cookie：

<Menu 
        ref="side_menu"
        theme="dark" 
        :active-name="activeName" 
        :open-names="openNames"
        @on-select="onSelect"
        @on-open-change="onOpenChange">
            <template v-for="menu in menu">
                <MenuItem v-if="!menu.children" :name="menu.id" :key="menu.id">
                    <Icon :type="menu.icon" :key="menu.id"></Icon>
                    <span class="layout-text" :key="menu.id">{{menu.name}}</span>
                </MenuItem>
                <Submenu v-if="menu.children && menu.children.length>=1" :name="menu.id" :key="menu.id">
                    <template slot="title">
                        <Icon :type="menu.icon"></Icon>
                        <span class="layout-text">{{ menu.name }}</span>
                    </template>
                    <template v-for="child in menu.children">
                        <MenuItem :name="`${menu.id}-${child.id}`" :key="child.id">
                            <Icon :type="child.icon" :key="child.id"></Icon>
                            <span class="layout-text" :key="child.id">{{ child.name }}</span>
                        </MenuItem>
                    </template>
                </Submenu>
            </template>
        </Menu>

mounted(){
            let open_names = Cookies.getJSON('menu_opennames');
            let active_name = Cookies.getJSON('active_name');
            if(open_names || active_name){
                this.openNames = open_names || [];
                this.activeName = active_name || 0;
                this.$nextTick(()=>{
                    this.$refs.side_menu.updateOpened();
                    this.$refs.side_menu.updateActiveName()
                })
            }
        },
        methods:{
            onOpenChange(name){
                //设置菜单展开子菜单的数组name
                Cookies.set('menu_opennames',name);
            },
            onSelect(name){        
                //设置菜单激活的name        
                Cookies.set('active_name',name);

Answer 2

设置完openNames，activeName值以后，要在mounted以后，调用如下dom方法进行更新。实话，这俩方法看了回复才知道这么用的 (T＿T)

<Menu ref="side_menu"></Menu>
this.$nextTick(() => {
  this.$refs.side_menu.updateOpened();
  this.$refs.side_menu.updateActiveName();
})

ps，openNames，activeName赋值不能在$nextTick中进行，不然dom更新方法会无效

Answer 3

open-names接收的数组，看文档

Answer 4

openNames:4改成openNames:['4']

Answer 5

我还是不太懂 我问下 openNames具体怎么操作 需要什么格式的json