vue.js 動的にclass名を決定したい

Question

こちらのLive demo
https://getbootstrap.jp/docs/5.0/components/modal/
を使用してモーダルを製作しています。

複数個のボタンを用意して、それぞれで別のモーダルを立ち上げるようにするために

data-bs-target="#exampleModal"
id="exampleModal"

この二つの部分の名前を動的に決定したいです。

idに関しては、:id=[[index]]
※indexは連続する数値

とすることでおそらく解決できているのですが、data-bs-targetに関しては、:data-bs-target="#[[index]]"とすると挙動がおかしくなってしまいます。

どなたかご教示お願いいたします。

Answer 1

説明が下手ですが…

属性にbindする際はJS式（JSのコード）を記述するため、#[[index]]は式として成り立っていません
デリミタ（おそらく投稿者様は{{ }}→[[ ]]に変更している）を使った変数展開は式の外でしか使えないため、式の中では外しましょう

なので普通に文字列をjsで記述すると動くと思います

indexがStringなら：:data-bs-target="'#'+index"
indexがIntなら：:data-bs-target="'#'+String(index)"

注意としてJS式を文字列として記入するのでシングル・ダブルクオーテーションを両方使っています

Comments

[TKG000]

ありがとうございました！

[TKG000]

:data-bs-target="'#testModal'+String(index)"
:id="'testModal'+String(index)"

教えていただいた通りに書いてみるとうまくいきました。