Vue.jsで単一要素のループではなく、複数要素のブロックをループさせたいということがたまにあるので、その際のループ方法をメモしておきます。
サンプルコード
例として、以下のようなタグ構造でdtとddのセットをループさせたいとします。
1 2 3 4 5 6 7 8 | <dl> <dt>天ヶ瀬むゆ</dt> <dd>夢を食べる半人半妖。寝ている人の悪い夢を、良い夢に変えることができる。普段は周囲にバレないよう気をつけているが、自身も様々な夢を見たいと配信活動を始める。しかし未だ本人の寝つきは悪い。</dd> <dt>先斗寧</dt> <dd>関西出身の、異界と現代を繋ぐ雑貨屋でアルバイトする学生。雑貨屋に住み着く妖精が見えるようになったのだが、ブルーベリーの食べすぎのせいかもしれない。</dd> <dt>海妹四葉</dt> <dd>「チャレンジしてから考える」タイプの、七転び八起き貧乏学生。新しく楽しい挑戦を求めた結果、配信活動を始めることにした。頼られようと本人は振舞っているつもりが、なぜかいつも心配されてしまう。</dd></dl> |
ループ用にdtとddを囲うタグを追加する形でもループさせることはできますが、タグ構造を変更させたくない場合はtemplateタグを使用します。
1 2 3 4 5 6 7 8 | <div id="app"> <dl> <template v-for="member in members"> <dt>{{ member.name }}</dt> <dd>{{ member.profile }}</dd> </template> </dl></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var app = new Vue({ el: '#app', data: { members: [ { name: '天ヶ瀬むゆ', profile: '夢を食べる半人半妖。寝ている人の悪い夢を、良い夢に変えることができる。普段は周囲にバレないよう気をつけているが、自身も様々な夢を見たいと配信活動を始める。しかし未だ本人の寝つきは悪い。' }, { name: '先斗寧', profile: '関西出身の、異界と現代を繋ぐ雑貨屋でアルバイトする学生。雑貨屋に住み着く妖精が見えるようになったのだが、ブルーベリーの食べすぎのせいかもしれない。' }, { name: '海妹四葉', profile: '「チャレンジしてから考える」タイプの、七転び八起き貧乏学生。新しく楽しい挑戦を求めた結果、配信活動を始めることにした。頼られようと本人は振舞っているつもりが、なぜかいつも心配されてしまう。' } ] }}); |
templateタグはレンダリング時には描画されないため、意図したタグ構造で表示することができました。
v-forのデモページ
コメントが承認されるまで時間がかかります。