Vue.jsでループを入れ子にする

Vue.jsでループを入れ子にする方法が分からなかったので、実装方法をメモ。

サンプルコード

以下のようなデータで、teamsとその中のmembersでループしたいとします。

JavaScript

var app = new Vue({
	el: '#list',
	data: {
		teams: [
			{
				name: 'はるかな',
				members: [
					{
						'name': '大空 遥'
					}, {
						'name': '比嘉 かなた'
					}
				]
			}, {
				name: 'エクレア',
				members: [
					{
						'name': 'トーマス・紅愛'
					}, {
						'name': 'トーマス・恵美理'
					}
				]
			}, {
				name: 'なるあや',
				members: [
					{
						'name': '遠井 成美'
					}, {
						'name': '立花 彩紗'
					}
				]
			}
		]
	}
})

v-forを使って、以下のように入れ子にできるようです。

HTML

<div id="list">
	<div v-for="team in teams">
		{{ team.name }}
		<ul>
			<li v-for="member in team.members">
				{{ member.name }}
			</li>
		</ul>
	</div>
</div>

一つ目のループはv-for=”team in teams”のようにして、入れ子のループは先ほどのteamを使ってv-for=”member in team.members”のようにしてループしています。
ループを入れ子にするデモページ
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31