v-for for list rendering in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the v-for directive do in Vue?

The v-for directive repeats a block of HTML for each item in a list or array, rendering multiple elements dynamically.

beginner

How do you write a v-for loop to render items in an array called fruits?

Use <li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li> to loop through fruits and display each fruit with a unique key.

intermediate

Why is the :key attribute important when using v-for?

The :key helps Vue track each item uniquely, improving rendering performance and avoiding bugs when the list changes.

intermediate

Can v-for be used to loop over objects? How?

Yes. You can loop over an object’s properties using v-for="(value, key) in object", where key is the property name and value is its value.

beginner

What happens if you forget to add a :key in a v-for loop?

Vue will warn you in the console. Without keys, Vue may reuse elements incorrectly, causing unexpected UI bugs.

What is the correct syntax to loop over an array items using v-for?

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

B <li v-for="items in item">{{ item.name }}</li>

C <li v-for="item of items">{{ item.name }}</li>

D <li v-for="items">{{ item.name }}</li>

Option A uses the correct syntax with v-for="item in items" and a unique :key.

Why should you always provide a :key when using v-for?

A To improve rendering performance and help Vue track elements

B To add styles to the list

C To make the list items clickable

D To sort the list automatically

The :key helps Vue identify each element uniquely for efficient updates.

Which of these is a valid way to loop over an object with v-for?

A <div v-for="key in myObject">{{ key }}</div>

B <div v-for="(value, key) in myObject">{{ key }}: {{ value }}</div>

C <div v-for="item in myObject">{{ item }}</div>

D <div v-for="myObject">{{ myObject }}</div>

Option B correctly destructures the object into key and value pairs.

What will happen if you use the same :key for multiple items in a v-for list?

A Vue will automatically fix the keys

B The list will sort itself

C Vue may render incorrectly and cause bugs

D Nothing, it works fine

Duplicate keys confuse Vue’s rendering system and can cause UI errors.

Which directive is used to repeat elements in Vue?

A v-show

B v-if

C v-bind

D v-for

v-for is the directive for looping over lists.

Explain how to use v-for to render a list of items in Vue. Include why the :key attribute is important.

Think about how you would show a list of fruits on a webpage using Vue.

Describe how you can loop over an object’s properties using v-for in Vue.

Imagine you have an object with names and ages and want to show both.