CODEWITHSUNDEEP
vue.js
Steve
Steve

Reputation: 4463

NavBar in Vue using v-for and router

I have this default vue navbar which I want to make it more dynamic by using v-for.

Before changes, this is the code:

<template>
    <div>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>
</template>

After changes, this is the code:

<template>
    <div>
        <div v-for="navbar in navbars" :key="navbar.id">
            <router-link :to="navbar.router">{{ navbar.names }}</router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: "Header",
  navbars: [
    { names: "Home", router: "/" },
    { names: "About", router: "/About" }
  ]
};
</script>

But after converted it, the navbar doesn't show up. Anything I miss out?

Upvotes: 1

Views: 672

Answers (1)

wangdev87
wangdev87

Reputation: 8751

You need to define navbars as a data of the component using data

<template>
    <div>
        <div v-for="navbar in navbars" :key="navbar.id">
            <router-link :to="navbar.router">{{ navbar.names }}</router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: "Header",
  data: function () {
    return {
      navbars: [
        { names: "Home", router: "/" },
        { names: "About", router: "/About" }
      ]
    }
  }
};
</script>

Upvotes: 1

Related Questions