請問iview中動態(tài)加載3級菜單的json數(shù)據(jù)，非常感謝

<template>
    <Menu active-name="1-2" :open-names="['1']">
        <Submenu name="1">
            <template slot="title">
                <Icon type="ios-analytics"></Icon>
                Navigation One
            </template>
            <MenuGroup title="Item 1">
                <MenuItem name="1-1">Option 1</MenuItem>
                <MenuItem name="1-2">Option 2</MenuItem>
            </MenuGroup>
            <MenuGroup title="Item 2">
                <MenuItem name="1-3">Option 3</MenuItem>
                <MenuItem name="1-4">Option 4</MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="2">
            <template slot="title">
                <Icon type="ios-filing"></Icon>
                Navigation Two
            </template>
            <MenuItem name="2-1">Option 5</MenuItem>
            <MenuItem name="2-2">Option 6</MenuItem>
            <Submenu name="3">
                <template slot="title">Submenu</template>
                <MenuItem name="3-1">Option 7</MenuItem>
                <MenuItem name="3-2">Option 8</MenuItem>
            </Submenu>
        </Submenu>
        <Submenu name="4">
            <template slot="title">
                <Icon type="ios-gear"></Icon>
                Navigation Three
            </template>
            <MenuItem name="4-1">Option 9</MenuItem>
            <MenuItem name="4-2">Option 10</MenuItem>
            <MenuItem name="4-3">Option 11</MenuItem>
            <MenuItem name="4-4">Option 12</MenuItem>
        </Submenu>
    </Menu>
</template>
<script>
    export default {
        return {
            
        }
    }
</script>

這是我的樹結(jié)構(gòu)，我想動態(tài)渲染到上面的三級菜單里面，請問需要怎么操作。

[{
    "attributes": {
        "url": ""
    },
    "checked": false,
    "children": [{
        "attributes": {
            "url": ""
        },
        "checked": false,
        "children": [{
            "attributes": {
                "url": "vipdate"
            },
            "checked": false,
            "ctype": "02",
            "iconCls": "icon-bars",
            "id": "450f0714",
            "state": "open",
            "text": "日報表"
        },  {
            "attributes": {
                "url": "vipmonth"
            },
            "checked": false,
            "ctype": "02",
            "iconCls": "icon-bars",
            "id": "3f784dcf",
            "state": "open",
            "text": "月報表"
        }],
        "ctype": "01",
        "iconCls": "icon-bars",
        "id": "488de339",
        "state": "closed",
        "text": "分析報表"
    }],
    "ctype": "01",
    "iconCls": "icon-duot",
    "id": "a3625439-a626-3993-6ace-349498f47cab",
    "state": "closed",
    "text": "報表查詢"
}, {
    "attributes": {
        "url": "kehuguanli"
    },
    "checked": false,
    "children": [{
        "attributes": {
            "url": "viewPerson"
        },
        "checked": false,
        "ctype": "02",
        "iconCls": "icon-mans",
        "id": "34d68d1",
        "state": "open",
        "text": "人員管理"
    }, {
        "attributes": {
            "url": "personvip"
        },
        "checked": false,
        "ctype": "02",
        "iconCls": "icon-limi",
        "id": "6bacce8e",
        "state": "open",
        "text": "推送"
    }, {
        "attributes": {
            "url": "personSnap"
        },
        "checked": false,
        "ctype": "02",
        "iconCls": "icon-gree",
        "id": "dd84",
        "state": "open",
        "text": "抓拍"
    }],
    "ctype": "01",
    "iconCls": "icon-grou",
    "id": "6fa5bce8-1ff7-c06a-a8ed-f58b77038689",
    "state": "closed",
    "text": "客戶管理"
}]

目前我寫的代碼只能夠渲染2級，到第三級菜單的時候就獲取不到數(shù)據(jù)了。

<Menu @on-select='getName'>
                <Submenu :name="index"  v-for="(MenuItem , index) of menuList" :key="index">
                    <template slot="title">
                        <Icon type="ios-filing"></Icon>
                        {{  MenuItem.text }}
                    </template>
                    <MenuItem :name="items.id" v-for="items of MenuItem.children" :key="items.id" >
                        {{ items.text }}
                        <template v-if="items.children && items.children.length>1">

                        </template>
                    </MenuItem>
                     <Submenu name="5" v-if="true" >
                        <template slot="title">aa</template>
                        <MenuItem name="3-1">Option 7</MenuItem>
                        <MenuItem name="3-2"> qwwq </MenuItem>
                    </Submenu>
                </Submenu>
            </Menu>

回答

編輯回答

只愛你

剛好寫了一部分看到幫你補(bǔ)了一級沒測過可以試試看

<Menu @on-select='getName'>
 <template v-for="firstMenu in menuList">
      <Submenu v-if="firstMenu.children" :key="firstMenu.text" :name="firstMenu.text">
        <template slot="title">
          <Icon type="ios-navigate"></Icon>
          <span v-text="firstMenu.text"></span>
        </template>
        <template v-for="secondMenu in menuList">
          <Submenu v-if="secondMenu.children" :key="secondMenu.text" :name="secondMenu.text">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              <span v-text="secondMenu.text"></span>
            </template>
            <Menu-Item v-for="thirdMenu in secondMenu.children"
                       :name="thirdMenu.name"
                       :key="thirdMenu.name"
                       v-html="thirdMenu.title">
            </Menu-Item>
          </Submenu>
          <Menu-Item v-else :name="secondMenu.text"
                     :key="secondMenu.text"
                     v-html="secondMenu.text">
          </Menu-Item>
        </template>
        <Menu-Item v-for="secondMenu in firstMenu.children"
                   :name="secondMenu.name"
                   :key="secondMenu.name"
                   v-html="secondMenu.title">
        </Menu-Item>
      </Submenu>
      <Menu-Item v-else :name="firstMenu.text"
                 :key="firstMenu.text"
                 v-html="firstMenu.text">
      </Menu-Item>
    </template>
</Menu>

2017年11月25日 10:07