How to use variable for html attribute in vue?

Question

I'm using vue-router and I want to create navigation bar like this.

//...
navs: [
   { title: 'Home', router: '/' },
   { title: 'Settings', router: '/settings' }
]

//...

<li v-for='nav in navs' :key="nav.title" class="nav">
   <router-link to='nav.router'>{{nav.title}}</router-link> //nav.router does not return as I expect
</li>

//...

But nav.router all navigate to /nav.router not / an /settings

Is there a way to fix this?

Answer 1

Try to bind your routes:

:to='nav.router'