Добавление выпадающих списков в vue. js router-link - PullRequest
Новая
       17

Добавление выпадающих списков в vue. js router-link

0 голосов
/ 02 апреля 2020

Я создал маршрутизатор vue. js и вставил ссылки, найденные в массиве, используя структуру, найденную ниже. Это отображает ссылки по горизонтали. Однако я бы хотел добавить выпадающие списки вместо простых ссылок. Можно ли это как-то использовать, используя эту или подобную структуру? 

<nav style="text-align: right">
  <router-link class="spacing" v-for="routes in links"
  v-bind:key="routes.id"
  :to="`${routes.page}`">{{routes.text}}</router-link>
</nav>

      links: [
    {
      id: 0,
      text: 'Buy',
      page: '/Buy'
    },
    {
      id: 1,
      text: 'Sale',
      page: '/Sale'
    },
    {
      id: 2,
      text: 'Transactions',
      page: '/Transactions'
    },
    {
      id: 3,
      text: 'Help',
      page: '/Help'
    }
  ]

Спасибо. J

1 Ответ

2 голосов
/ 02 апреля 2020

Да, есть несколько способов сделать это, хотя вам придется l oop вместо чего-то отличного от <router-link>, так как этот компонент отображает тег <a>.

Сначала я настрою ваш HTML так, чтобы вы могли использовать раскрывающееся взаимодействие, будь то при наведении курсора или на щелчке, затем измените вашу структуру данных и l oop для ее поддержки.

Я мог бы сделать что-то вроде этого: 

<nav style="text-align: right">

  <div
    class="nav-item"
    v-for="link in links" // Move loop to container of shown link and it's dropdown markup
  >
    <router-link
      :key="link.id"
      :to="`${link.page}`"
    >
      {{ link.text }}
    </router-link>

    <div class="nav-item-drawer">
      <router-link
        v-for="subLink in link.subLinks"
        :key="subLink.id"
        :to="`${subLink.page}`"
      >
        {{ subLink.text }}
      </router-link>
    </div>

  </div>

</nav>

со следующей структурой данных: 

  links: [
    {
      id: 0,
      text: 'Buy',
      page: '/Buy',
      subLinks: [
        {
          id: 0,
          text: 'Buy Sublink 1',
          page: '/Buy-more'
        },
        {
          id: 1,
          text: 'Buy Sublink 2',
          page: '/Buy-less'
        },
      ]
    },
    {
      id: 1,
      text: 'Sale',
      page: '/Sale'
    },
    //...
  ]
...