When the name of a router link is dynamic how should we name the link? - vuejs2

Question

I have a list of items in navbar that will be rendered. Each item should have a link related to its name. Because I don't want to hard code the links I don't know how to name the links.
<b-nav-item-dropdown no-caret class="mr-2">
<!-- Using 'button-content' slot -->
<template #button-content>
<div><b-icon icon="person-fill"></b-icon> {{ userItems[0] }}</div>
</template>
<b-dropdown-item
v-for="(userItem, index) in userItems[1]"
:key="index"
:to="userItem"
>
{{ userItem }}
</b-dropdown-item>
</b-nav-item-dropdown>
:to="{name: userItem }" doesn't work either.

Answer 1

I think your code should be:
<b-dropdown-item
v-for="(userItem, index) in userItems[1]"
:key="index"
>
<router-link to="your_path_or_route_name_here">
</b-dropdown-item>

Answer 2

I tried to reproduce your issue but since I had no idea about your data I created my own userItems. I created a code snippet for you to better understand the implementation.
new Vue({
el: '#app',
data() {
return {
userItems: [{
name: "Link 1",
path: "/link1"
},
{
name: "Link 2",
path: "/link2"
},
{
name: "Link 3",
path: "/link3"
}
],
}
},
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-nav-item-dropdown no-caret class="mr-2">
<!-- Using 'button-content' slot -->
<template #button-content>
<div>
Dropdown
</div>
</template>
<b-dropdown-item v-for="(userItem, index) in userItems" :key="index" :to="userItem.path">
{{ userItem.name }}
</b-dropdown-item>
</b-nav-item-dropdown>
</div>