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

2

В приложении 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, чтобы реорганизовать мой код с несколькими кнопками?

Теги:
vuejs2
nuxt.js
vuetify.js

3 ответа

0
Лучший ответ

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

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

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

4

Вы должны использовать 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>
  • 0
    Пожалуйста, дополните
0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню