How to define a Nuxt link in a Vuetify button when portion of the path belongs to $route.params?

Admin 1
Viewed 19127

In Nuxt and Vuetify application, I have a series of buttons:

<v-btn dark color="orange" href="className/studentName" nuxt>
  <v-icon large left>favorite</v-icon>
  studentName
</v-btn>

I want to refactor this code knowing that I get className from the route: $route.params.className And I get studentName from a normal JavaScript array.

When I type href={{$route.params.className}}/studentName I get an error:

Use v-bind or the colon shorthand instead. For example, instead of

, use .

And when I do it that way:

:href="$route.params.className/studentName"

I get this error instead:

Invalid prop: type check failed for prop "href". Expected String, Object, got Number.

So how to define correctly my href prop without hard writing className (I mean I want to use $route.params.className in order to refactor my code which has several buttons?

vuejs2 nuxt.js vuetify.js javascript
3 Answers

You should use to="studentName" nuxt

For example:

 <v-toolbar-items class="hidden-sm-and">
    <v-btn flat to="/home" nuxt> Home </v-btn>
    <v-btn flat to="/contact" nuxt> Contact </v-btn>
    <v-btn flat to="/login" nuxt> Login </v-btn>
 </v-toolbar-items>
user_89281280

You can use a statement such as the following to evaluate the route param value and append the string /studentName:

:href="$route.params.className + '/studentName'"

Hopefully that helps!

user_50596570
user_63133330
Related