VueJS Nested Navigation 3-го уровня - PullRequest
Новая
       11

VueJS Nested Navigation 3-го уровня

0 голосов
/ 04 ноября 2019

ОК. Я довольно новичок в 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, но по какой-то причине он выдает «Service», см. Снимок экрана ниже. 

    <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>

enter image description here

1 Ответ

0 голосов
/ 04 ноября 2019

Проблема будет 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

...