Nuxt.jsにて、一覧画面から詳細画面にaタグhref属性で遷移する時に、hrefのURLのクエリパラメータを動的に変更したい。

Question

質問をご覧いただき、ありがとうございます。

###前提
Nuxt.jsにて、一覧画面と詳細画面を持つアプリケーションの作成をしております。

一覧画面は、テーブルでFirestoreから取得したデータを表示しています。
そして、一覧画面から、詳細画面に画面遷移する際に、aタグを使用しています。

【index.vue - 一覧画面】
<template>
 <div class="page">
   <h1>Data from Firebase!</h1>
   <table class="Table">
      <thead>
        <tr>
          <th>ID</th>
          <th>画像のURL</th>
          <th>アップロード日時</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dbData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.imagePaths }}</td>
          <td>{{ item.uploadDate }}</td>
          <td><a href="/detail">link to detail</a></td> //← このhrefにqueryParameterとして、ID、imagePaths、uploadDateを追加したいです！！ 
        </tr>
      </tbody>
    </table>
 </div>
</template>

【detail.vue - 詳細画面】
<template>
    <section class="container">
        <h1>Here is detail page</h1>
        <h3>ID: {{ id }}</h3>
        <h3>Images: {{ imagePaths }}</h3>
        <h3>Index: {{ uploadDate }}</h3>
        <div>
    </section>
</template>

「dbData」にFirestoreから参照したデータが格納されています！

aタグを使用している理由としては、詳細画面に遷移した時に、created()が実行されるようにするためで、
最終的には、created()の中で、Frebase Cloud Storageから「imagePaths」の画像をダウンロードして表示したいと考えているためです。

質問内容

この場合、aタグのhref属性の値となるURLにクエリパラメータとして、それぞれの行のid、imagePaths、uploadDateを追加して、以下のような形式にしたいのですが、
どのようにしたら良いかわかりません。
/sample?id=idの値&imagePaths=imagePathsの値&uploadDate=uploadDateの値

何かいい方法をご存知の方、いらっしゃいましたら、ご教示をお願い致します。

###参照情報
https://stackoverrun.com/ja/q/10142537
https://teratail.com/questions/155284

上記など、色々な記事などを読んでみたのですが、
解決できそうな方法を見つけることはできませんでした。

何卒、よろしくお願い致します。

Answer 1

バインドすればいいだけでは。
テンプレート構文 — Vue.js
【Nuxt.js】Nuxt文法編：v-bind - Qiita

Comments

[TsksHsgw]

szk.さん

返信が遅くなってしまい、すみません。
ご回答ありがとうございます！

実は、dbDataの中身が連想配列となっておりまして、
```
[
{ id: id0, imagePaths: imagePaths0, uploadDate: uploadDate0},
{ id: id1, imagePaths: imagePaths1, uploadDate: uploadDate1},
{ id: id2, imagePaths: imagePaths2, uploadDate: uploadDate2}
]
```
どのようにtableのインデックスを判定してURLを動的に設定しようか悩んでしまっていたのですが、
created()でdbDataの値を取得した時にURLを作成して、dbDataの中に各行に設定したいリンクのURLをpushして、`v-bind:href="item.detalUrl"` をaタグに追加することで問題解決できました。

ご回答ありがとうございました。