I'm struggling to pass a dynamic path to vue-router, but I can't seem to get the syntax right. Here's what I've been attempting:
<li v-on:click="$emit('closeDropdown')"><router-link :to="item.route" id="button">{{ item.title }}</router-link></li>
Simply wrapping it in quotes does not seem to be enough as when I inspect the elements, I see href="#/item.route" for all items.
PARENT COMPONENT
<UserDropdownList v-for="item in userDropdownItems" v-bind:item="item"></userDropdownList>
data: function () {
return {
userDropdownItems: [
{ title: 'Profile', route: "/profile" },
{ title: 'Users', route: "/users" }
]
}
}
How do I correctly access the route property for the router-link to attribute?