Pass links array from parent to child in vue (create links menu)

Question

I'm trying to create a menu in vue.js. I have 2 components - Navigation and NavLink. I created an array of links in App.vue file and passed it as a props to Navigation component. In the Navigation component I'm using NavLink to create 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"></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="#"></a>
    </li>
</template>

<script>
export default {
    props: ["links"]
}
</script>

<style>

</style>

It actually create 3 elements of 'NavLink' but the link title itself is empty, how can I pass the title of array items to the NavLink component?

I've edit my code, now the links data is passing from Navigation to NavLink and I see 3 li elements in the dom. The issue is that I can't see the title of each link inside the li element. The links are empty. How can I get the title? — Or Ben-Yossef
@OrBen-Yossef first comment is pointing you to the docs. Read it please. You will understand, you will learn, you will answer yourself :-) — Adam Orlov

rcbgalido rcbgalido · Accepted Answer · 2019-12-27T09:28:25

You need to pass a title prop in NavLink component

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"></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>

Pass links array from parent to child in vue (create links menu)

1 Answers