「Nuxt.js: URL を使用して ID を渡す」

Question

<p>ユーザー ID を取得したいので、ドロップダウン ボタン =</p> を用意します。 <pre class="brush:html;toolbar:false;"><v-menu トランジション=「スライド-Y-トランジション」 底 オフセット-y > <template v-slot:activator="{ on, attrs }" > リスト </v-btn> </テンプレート> <v-list> <v-list-item-title>{{item.title}}</v-list-item-title> </v-リストアイテム> </v-list> </v-メニュー> </pre> <p>そしてこのデータ:</p> <pre class="brush:html;toolbar:false;"><script> デフォルトのエクスポート { データ: () => ({ アイテム: [ { タイトル: 'ユーザーリスト', URL: ''/user/function/listUser/${route.params.id}'' }、 { タイトル: 'ユーザー構造', URL: ''/user/function/structUser/${route.params.id}'' } ] }) } </スクリプト> </pre> <p>ユーザーIDを送信することが目的です。このようにして、実際に <code>route.params.id</code> 経由で </p> を取得できます。 <pre class="brush:js;toolbar:false;">url: ''/user/function/structUser/${route.params.id}'' </pre> <p>動作しません。何を間違えたのでしょうか? </p>

Answer 1

1. テンプレート文字列ではバッククォートのみが使用されていますが、文字列では一重引用符とバッククォートの両方が使用されています。

2. 置換値 (route.params.id) は、この例では未定義のように見える route 変数を参照しています。 this.$route にアクセスしたいと思うので、実際の置き換えは this.$route.params.id

   になるはずです。

items配列は次のようになります:

リーリー ＃＃＃＃＃＃デモ＃＃＃＃＃＃

Answer 2

これは一例です

リーリー

また、計算プロパティではない可能性があるため、computed 内で使用してみてください。