Как определить ссылку Nuxt в кнопке Vuetify, когда часть пути принадлежит $ route.params?

Question

В приложении Nuxt и Vuetify у меня есть ряд кнопок:

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

Я хочу провести рефакторинг этого кода, зная, что я получаю className по маршруту: $route.params.className И я получаю studentName из обычного массива JavaScript.

Когда я набираю href = {{$ route.params.className}} / studentName, я получаю ошибку:

Вместо этого используйте v-bind или сокращение двоеточия. Например, вместо , используйте.

И когда я делаю это таким образом:

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

Вместо этого я получаю эту ошибку:

Invalid prop: проверка типа не выполнена для prop "href". Ожидаемая строка, Объект, получивший номер.

Итак, как правильно определить мой href реквизит без жесткого написания className (я имею в виду, я хочу использовать $route.params.className для рефакторинга моего кода, который имеет несколько кнопок?

Answer 1

Вы можете использовать v-bind:href=className+"/"+studentName, чтобы заставить это работать.Вы можете найти рабочий код на https://codepen.io/mohithg/pen/yxRabK

Answer 2

Вы должны использовать to="studentName" nuxt

Например:

 <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>

Answer 3

Вы можете использовать следующую инструкцию, чтобы оценить значение параметра маршрута и добавить строку /studentName:

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

Надеюсь, это поможет!