How to iterate over vue components with animation
You can try this.
<ul> <li v-for="(navLink, index) in navLinks" v-bind:key="navLink.name" > <NavLink :target="`${navLink.target}`" :name="`${navLink.name}`" :class="trans-nav-${index + 1}" /> </li></ul>You can use v-for as v-for="(navLink, index) in navLinks" to know what current index of the item in the loop. Then, use binding to create a dynamic class like :class="trans-nav-${index + 1}".