CODEWITHSUNDEEP
vue.jsvue-router
Alireza Alavi
Alireza Alavi

Reputation: 23

Rendering VUE router links with v-for

i want to create an app that renders links dynamically with v-for and opens different components with each link. I know how to render the <router-link> itself ,But I don't know how to dynamically change the destination url of the to="" prop.

Upvotes: 2

Views: 523

Answers (2)

AVJT82
AVJT82

Reputation: 73357

If your array looks for example like this:

components: [
  {
    path: "/a",
    name: "Component A"
  },
  {
    path: "/b",
    name: "Component B"
  }
]

You can use it in v-for like:

<router-link
  v-for="(comp, i) in components"
  :key="i"
  :to="{ path: comp.path }"
>
  {{comp.name}}
</router-link>

Upvotes: 2

Viral Prajapati
Viral Prajapati

Reputation: 21

You can achieve this using bind :to="{path: '/to'}" in <router-link>.

Upvotes: 0

Related Questions