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”のようにしてループしています。
ループを入れ子にするデモページ