How does v-for work and what are its best practices?

v-for renders an element once for each item in a source, using the item in items syntax. The source can be an array, an object or a number.

<!-- Array iteration -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<!-- Object iteration -->
<li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
<!-- Number iteration -->
<span v-for="n in 10" :key="n">{{ n }}</span>

An optional second alias gives the index for an array, or the key for an object. With a number, n counts from 1 up to the number, not from 0.

Best practices:

• Always use :key with a unique, stable identifier. Without a key, Vue patches elements in place by position, which breaks lists that hold component state or input values.
• Avoid using the index as the key when the list can change, because the index follows the position, not the item.
• Don't use v-for and v-if on the same element. v-if runs first and cannot see the loop variable, so filter the list in a computed property instead.