好的，我对VueJS还是陌生的，但是我不确定在这里缺少什么。我们的分类导航深入了3个级别。我正在尝试输出嵌套导航的第3级，但它没有按我期望的那样工作。

这是我用来测试的JSON，我要使用的数据先于子级，然后是子级。

    return {
      navList: [
        { id: 1,type: 'Item',url: "#",name: "About Us",target: '_blank' },{ id: 2,name: "Story",{ id: 3,name: "Price",{
          id: 4,name: "Services",target: '_blank',children: [
            {
              url: "https://twitter.com/",name: "Twitter",target: "_blank",child: [
                {
                  url: "https://twitter.com/",},{
                  url: "https://dribbble.com/",name: "Dribbble",target: "_blank"
                },{
                  url: "https://www.behance.net/",name: "Behance",],{
              url: "https://dribbble.com/",target: "_blank"
            },]
        },]
    };
  },

这是我的导航代码。            

我试图遍历使用item.children.child，但是由于某种原因，它正在输出“服务”，请参见下面的屏幕截图。

    <template>
      <nav class="navbar navbar-light navbar-expand-lg mainmenu">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav mr-auto">
            <li v-for="item in navList" :key="item.id" class="dropdown">
              <template v-if="item.children">
                <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  :id="item.name"
                  :href="item.url" 
                  :title="item.name" 
                  @click="show = !show">{{ item.name }}
                </a>
                <ul class="dropdown-menu" 
                      :class="{ show }"  
                      :aria-labelledby="item.name">
                    <li class="dropdown-item" v-for="{ url,name,index,target } in item.children" :key="index" >
                        <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"
                          :href="url" 
                          :title="name" 
                          :target="target"
                          :data-toggle="name">
                          {{ name }}
                        </a> 
                        <ul class="dropdown-menu" 
                          :aria-labelledby="name">
                          <template v-if="item.children.child">
                            <li class="dropdown-item" v-for="{ url,target } in item.children.child" :key="index" >
                            <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false"
                              :href="url" 
                              :title="name" 
                              :target="target"
                              :data-toggle="name">
                              {{ name }}
                            </a> 
                            </li>
                          </template>
                          <template v-else>
                            <a class="nav-link"
                              :href="item.url" 
                              :title="item.name"
                              :target="item.target"
                              >{{ item.name }}</a>
                          </template>
                        </ul> 
                    </li>
                </ul>
              </template>
              <template v-else>
                  <a class="nav-link"
                    :href="item.url" 
                    :title="item.name"
                    :target="item.target"
                    >{{ item.name }}</a>
              </template>
            </li>
          </ul>
        </div>
      </nav>
    </template>