Vue.jsでv-repeatをネストするには

2014/03/16 18:23:34

いまいちやり方がわからず前回はあきらめた・・。
が、いまやったらできた！

見た方が早いと思うので、コチラをどうぞ。
なんかjsfiddleは調子が悪かったので、CodePenに。

参考：CodePen - Pen

Gistにもメモっておくことにした。

参考：How to v-repeat in v-repeat at Vue.js

v-repeatをネストするようなケース

まあテンプレートなるものでアレコレするケースでは、よくあることかと思います。
こんなデータを、こんなテンプレで。

How to v-repeat in v-repeat at Vue.js

v-repeat(他)で使える特殊変数

っていうかはわからんけど。

$parent: イテレーションしてるそれぞれの親オブジェクト
$root: 根本のオブジェクト(てか$data)
$index: いわゆるindex(0起算)
$key: イテレーションしてるソレのいわゆるkey
$value: イテレーションしてるソレのいわゆるvalue

直感的に使えるかと思われる。

参考：Displaying a List - vue.js

v0.8.8から

Starting in Vue.js v0.8.8, you can also use v-repeat to iterate through the properties of an Object. Each repeated instance will have a special property $key.

使えるようになったの、0.8.8かららしい。
そういえば、

@leader22 http://t.co/XXVqHlPEnr Note `value` will be changed to `$value` soon.
— Evan You (@youyuxi) 2014, 2月 18

こないだツイートしてくれてたのはこのコトやったんやな！さすがですわー。
あの時はイマイチ意味わかってなかったです(・ω<)

個人的に困ってたポイント解消されたので、実戦投入できるのではと思っておる次第。