javascript - VueJS 嵌套导航 3 级

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>

标签： javascriptvue.jsvuejs2vue-component

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