CODEWITHSUNDEEP
vuejs2vue-router
WUSO01
WUSO01

Reputation: 115

I used v-for the router-link but it‘s not worked

<li v-for="item in navbars">
    <router-link to="{path:item.router}">{{item.names}}</router-link>
</li>

but it does not work, the console is

vue-router.esm.js?f926:16 [vue-router] Duplicate named routes definition: { name: "auto", path: "/auto" }

export default {
  data () {
    return {
      isShow: false,
      navbars: [
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'},
        {names: 'xx', router: '/xx'}
      ]
    }
  }
}

Upvotes: 4

Views: 9100

Answers (3)

Qui-Gon Jinn
Qui-Gon Jinn

Reputation: 4398

If you use router-link:

<li v-for="item in navbars" v-bind:key="item.id">
        <router-link :to="{path:item.router}">{{item.names}}</router-link>
</li>

or if you use href:

  <li v-for="item in navbars" v-bind:key="item.id">                    
      <a :href="item.router">{{ item.title }}</a>
    </li>

You can add id to navbars

 export default {
      data () {
        return {
          isShow: false,
          navbars: [
            {names: 'xx', router: '/xx', id: 1},
            {names: 'xx', router: '/xx', id: 2},
            {names: 'xx', router: '/xx', id: 3},
            {names: 'xx', router: '/xx', id: 4},
            {names: 'xx', router: '/xx', id: 5}
          ]
        }
      }
    }

Upvotes: 2

Daniel Danielecki
Daniel Danielecki

Reputation: 10522

Instead of having to change into :to. A good practice would be to use :key="i" including v-for="(item, i) in navbars" due to performance reasons.

A note from someone else visiting this question and having :href in its code - you need to change :href into :to.

Upvotes: 3

Julien
Julien

Reputation: 1238

you should use v-bind when you use javascript expression:

 <router-link :to="{path:item.router}">{{item.names}}</router-link>

vue router-link

Upvotes: 0

Related Questions