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
そして通常のJavaScript配列からstudentNameを取得します。
Href = {{$ route.params.className}}/studentNameと入力すると、エラーが発生します。
代わりに、v-bindまたはコロンの省略形を使用してください。たとえば、の代わりに。を使用します。
そして、私がそのようにそれをするとき:
:href="$route.params.className/studentName"
代わりにこのエラーが発生します:
無効なprop:prop "href"の型チェックに失敗しました。予期される文字列、オブジェクト、取得された数値。
では、href
をハードに記述せずにclassName
propを正しく定義する方法(複数のボタンがあるコードをリファクタリングするために$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 にあります。