I am currently working on building a menu using vue.js. My setup includes 2 components - Navigation and NavLink. To populate the menu, I have created an array of links in the App.vue file and passed it as props to the Navigation component. Within the Navigation component, I am utilizing NavLink to generate the li element for each item in the array.
App.vue
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<app-nav></app-nav>
<hr />
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
"app-nav": Navigation
}
};
</script>
<style>
</style>
Navigation.vue
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<nav-link v-for="link in links" :title="link" :key="link"></nav-link>
</ul>
</div>
</nav>
</template>
<script>
import NavLink from "./NavLink.vue";
export default {
data() {
return {
links: ["Home", "Login", "Shop"]
};
},
components: {
"nav-link": NavLink
}
};
</script>
<style>
</style>
NavLink.vue
<template>
<li class="nav-item">
<a class="nav-link" href="#">{{ title }}</a>
</li>
</template>
<script>
export default {
props: ["title"]
}
</script>
<style>
</style>
The current implementation creates 3 instances of 'NavLink' but the link titles are empty. How can I ensure that the title of each array item is passed correctly to the NavLink component?