鍍金池/ 問答/Linux  HTML/ iview 動態(tài)設(shè)置menu組件open-names，但是不起作用，如何解決？

iview 動態(tài)設(shè)置menu組件open-names，但是不起作用，如何解決？

我在代碼中動態(tài)設(shè)置了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'
            ])
        },
回答
編輯回答
尕筱澄

open-names接收的數(shù)組，看文檔

2018年3月7日 15:20
編輯回答
我不懂

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

2017年12月6日 13:11
編輯回答
舊時光

我還是不太懂 我問下 openNames具體怎么操作 需要什么格式的json

2017年3月5日 18:21
編輯回答
笨笨噠

解決了，配合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){
                //設(shè)置菜單展開子菜單的數(shù)組name
                Cookies.set('menu_opennames',name);
            },
            onSelect(name){        
                //設(shè)置菜單激活的name        
                Cookies.set('active_name',name);
2017年10月3日 21:47
編輯回答
故林

設(shè)置完openNames，activeName值以后，要在mounted以后，調(diào)用如下dom方法進行更新。實話，這倆方法看了回復(fù)才知道這么用的 (T＿T)

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

ps，openNames，activeName賦值不能在$nextTick中進行，不然dom更新方法會無效

2017年5月5日 09:52