vuejs
/

Vue v-for Directive

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

vuejs

Vue v-for Directive

What is v-for?

The v-for directive is used to render a list of items by iterating over arrays or objects.

Basic Syntax

HTMLRead-only
1
<li v-for="item in items">{{ item }}</li>

With Index

HTMLRead-only
1
<li v-for="(item, index) in items">
  {{ index }} - {{ item }}
</li>

Using Key

The key attribute helps Vue track elements efficiently.

HTMLRead-only
1
<li v-for="item in items" :key="item.id">
  {{ item.name }}
</li>

Looping Through Objects

HTMLRead-only
1
<li v-for="(value, key) in user">
  {{ key }}: {{ value }}
</li>

Looping Numbers

HTMLRead-only
1
<p v-for="n in 5">{{ n }}</p>

Best Practices

  • Always use :key for list rendering
  • Use unique identifiers for keys
  • Avoid using index as key when possible
  • Keep loops simple and readable

Common Mistakes

  • Not using key attribute
  • Using index as key incorrectly
  • Complex logic inside v-for
  • Combining v-if and v-for improperly

Conclusion

The v-for directive is essential for rendering lists in Vue. Proper use of keys and clean loops ensures better performance and maintainability.

Try it yourself

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Test Your Knowledge

Q1
of 3

v-for is used for?

A
Condition
B
Loop
C
Binding
D
Event
Q2
of 3

What improves performance?

A
index
B
key
C
style
D
class
Q3
of 3

Can v-for loop objects?

A
No
B
Yes
C
Only arrays
D
Only numbers

Frequently Asked Questions

What is v-for?

It is used for looping through lists in Vue.

Why use key in v-for?

It helps Vue track elements efficiently.

Can we loop objects?

Yes, using (value, key) syntax.

Previous

vue v if

Next

vue v bind

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.