NavBar in Vue using v-for and router

Question

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?

tony19 · Accepted Answer · 2022-07-16 01:50:25Z

1

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>

edited Jul 16, 2022 at 1:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 16, 2020 at 1:24

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NavBar in Vue using v-for and router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related