How to use v-for in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Rendering dynamic lists and iterating over data is fundamental for creating responsive Vue applications with data tables, navigation menus, and content lists.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented v-for in countless Vue components for rendering data grids, dropdown options, and dashboard widgets in enterprise applications.
From my expertise, the most efficient approach is to use the v-for directive with proper key attributes.
This method ensures optimal performance through Vue’s virtual DOM diffing algorithm and prevents rendering issues during list updates.
Use v-for directive to iterate over arrays and render dynamic lists with unique key attributes.
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
The v-for directive creates multiple instances of an element for each item in an array, object, or number. The syntax item in items defines a local variable item for each iteration. Always include a :key attribute with a unique identifier to help Vue track changes efficiently and avoid rendering bugs. You can also access the index with (item, index) in items or iterate over objects with (value, key) in object. For numbers, use n in 10 to iterate from 1 to 10.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for data tables and navigation rendering.
Never use array indices as keys when the list can be reordered - always use unique, stable identifiers like item.id for proper list diffing.
