Vue.js nested v-repeat: How to access parent $index inside child?

Question

I am unable to do this:

<ul>
    <li v-repeat="candy: candies">
        <ul>
            <li v-repeat="flavour: candy.flavours">
                {{ candy.$index }}
            </li>
        </ul>
    </li> 
</ul>

Any work around?

Answer 1

UPDATE 2: v-for now supports specifying an alias for $index: http://vuejs.org/api/#v-for That should allow you to avoid naming collisions on $index.

UPDATE: VueJS 1.0 has deprecated v-repeat in favor of v-for. The same solution applies though.

---

Try using $parent.$index to access an $index in a parent scope.