Adding Dropdowns in a vue.js router-link - node.js

Question

I have created a vue.js router and inserting the links found in an array using the structure found hereafter. This displays the links horizontally. However, I would like to insert dropdowns, instead of simple links. Can this be done using this or similar structure somehow?
<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'
}
]

Answer 1

Yeah, there are a few ways you could do that, though you'll have to loop over something different than the <router-link>, since that component renders an <a> tag.
I would first adjust your HTML to allow for the drop-down interaction you want, whether it's hover- or click-based, then change your data structure and loop to support it.
I might do something like this:
<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>
with the following data structure:
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'
},
//...
]