web-dev-qa-db-ja.com

パスの一部が$ route.paramsに属している場合、VuetifyボタンでNuxtリンクを定義するにはどうすればよいですか？

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をハードに記述せずにclassNamepropを正しく定義する方法（複数のボタンがあるコードをリファクタリングするために$route.params.classNameを使用したいということですか？

javascriptvuejs2vuetify.jsnuxt.js
4
user10370401

次のようなステートメントを使用して、ルートパラメータ値を評価し、文字列/studentNameを追加できます。

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

うまくいけば、それが役立つでしょう！

0
Alexander Staroselsky

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

これを機能させるには、v-bind:href=className+"/"+studentNameを使用できます。動作するコードは https://codepen.io/mohithg/pen/yxRabK にあります。

0
Mohith