[Vuejs]-How to interpolate prop into the <router-link>?

by

0👍

Mustache syntax is invalid within html attributes. That is, this is invalid:

<router-link
  :to="'/' + '123' + '/' + item.id"
>
  {{ item.name }}
</router-link>

What is correct syntax is:

<router-link
  :to="`/${item.name}/${item.id}`"
>
  {{ item.name }}
</router-link>

Moreover, I would recommend checking out passing properties to the route object within the documentation. This will show you that you can declare variables within the router such as :id.

I would make another recommendation aside from the above to point out that if this was defined as a computed property of the component, it is easily both viewable in devtools and future debugging (e.g. you probably want to return empty string if the object props are undefined).

Leave a comment