Question

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

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

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

Answer 1

问题将是v-for="{ url, name, index, target } in item.children"。通过v-for，您可以使用v-for="item in items"或v-for="(item, index) in items"语法（谈论数组）。您实际上是在使用第一个，这意味着您正在尝试从项目中分解{ url, name, index, target }属性。这会导致index为undefined，因为您的商品没有此类属性，因此，列表商品不再具有唯一的:key属性。尝试以下方法：

v-for="({ url, name, target }, index) in item.children"

有关更多信息：https://vuejs.org/v2/guide/list.html

VueJS嵌套导航3级

1 个答案: