【Vue.js】v-forでループ表示するaタグのパラメータにユニークな値を振りたい

Question

前提・実現したいこと

Vue.js
v-forでループ表示するaタグのパラメータにユニークな値を振りたいです。
[data.idの値]とある部分を対応するidに書き換えたいです。

該当のソースコード

例）datasにJSONファイルデータが格納されています。

            <ul v-for="data of datas" >
                <li>
                   <a href="index.html?param=[data.idの値]"></a>
                   <p>{{data.text}}</p>
                </li>
            </ul>

[
	{
		"id": 1,
		"text": "テキスト１",
	},
    {
		"id": 2,
		"text": "テキスト２",
	}
]

試したこと

aタグにid="{{data.id}}"の様にidを振って、idを取得。jsで
index.html? + id
の形に整形して再度aタグにセット...と考えたのですが、
そもそもid="{{data.id}}"←こんな書き方出来ないもんなぁ...と

初歩的な質問かもしれませんが、何か妙案がありましたら教えていただければ助かります。
よろしくお願いいたします！

Answer 1

<ul>
  <li v-for="data of datas" v-bind:key="data.id">
    <a v-bind:href="`index.html?param=${data.id}`"></a>
    <p>{{data.text}}</p>
  </li>
</ul>

として下さい。

htmlの属性はv-bindを使って束縛する事でVue側の変数を扱うことが出来るので、その中にテンプレートリテラルを使って値を埋め込むのが一般的かと思います。
そしてバージョン2.2.0以降では、v-forを使用する時はkeyの設定が必須になっているので、上記のように識別可能な何らかの値~~（indexでもOK）~~をkeyに渡してあげて下さい。
追記：keyにindexを使用してしまうと、例えば要素の削除等があった場合にはindexが変わってしまうので良くない実装でした。

それと本題では無いかもしれませんが、今のコードですとulタグごとdatasのlength個分レンダリングされしまうので、v-forはliタグに書いてあげたほうが良いかと思います。