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

Question

I can not do it:

<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-forNow supports specifying an alias for $index: http://vuejs.org/api/#v-for This should allow you to avoid naming collisions on $index.

UPDATE: VueJS 1.0 is deprecated v-repeatin favor v-for. However, this is the same solution.

---

Try to use $parent.$indexto access $indexin the parent area.