В приложении 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
, чтобы реорганизовать мой код с несколькими кнопками?
Вы можете использовать следующую инструкцию, чтобы оценить значение параметра маршрута и добавить строку /studentName
:
:href="$route.params.className + '/studentName'"
Надеюсь, это поможет!
Вы должны использовать 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>
Вы можете использовать v-bind:href=className+"/"+studentName
, чтобы получить эту работу. Рабочий код можно найти на странице https://codepen.io/mohithg/pen/yxRabK