v-for

Imagine you have a basket of apples, and you want to display each apple on your computer screen, each with its unique color and size. It would be tiresome to write code for each apple separately. This is where Vue 3's v-for comes in! It's a handy tool to display each item in a collection, such as our basket of apples, without repeating the code for each item.

This topic will guide you through the use of v-for in Vue 3, focusing on rendering lists of items based on an array using the Composition API.

v-for: the basics

v-for is a directive in Vue 3 that lets you render a list of items by repeating a template for each item in an array or an object. Think of it as a loop in programming that goes through each item on your list, rendering it on the screen.

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

The basic syntax for v-for is v-for="item in items", where "item" represents an individual element and "items" represents the array.

Say you have a basket of different apples, and you want to display them. Here's how you'd do it using v-for.

<template>
  <section>
    <article v-for="apple in apples" :key="apple.id">
      {{ apple.type }}
    </article>
  </section>
</template>

<script setup>
import { ref } from 'vue';

const apples = ref([
  { id: 1, type: 'Red' },
  { id: 2, type: 'Green' },
  { id: 3, type: 'Golden' },
]);
</script>

In the above code snippet, the v-for directive is used to render a list of articles, each representing an apple from the apples array. By using v-for="apple in apples", we instruct Vue to iterate over each apple object within the array, creating an article element for each one.

The :key="apple.id" part is crucial; it assigns a unique key to each article element based on the apple's ID. This ensures that each rendered apple has a distinct identity, allowing Vue to efficiently manage updates to the list.

Within each article element, the expression {{ apple.type }} is used to print the apple type, such as 'Red', 'Green', or 'Golden'. The result is a dynamically generated section containing individual articles for each apple in the basket, all achieved with the help of the v-for directive.

Using v-for with objects

v-for can also be used to iterate over the properties of an object. Displaying personal details, for example:

<template>
  <dl v-for="(value, key) in person" :key="key">
    <dt>{{ key }}</dt>
    <dd>{{ value }}</dd>
  </dl>
</template>

<script setup>
import { ref } from 'vue';

const person = ref({
  name: 'John',
  age: 30,
  occupation: 'Engineer',
});
</script>

Here, v-for is used to iterate over the properties of the person object, displaying each key and value. And here is the result:

<dl>
    <dt>name</dt>   
    <dd>John</dd>
</dl>
<dl>
    <dt>age</dt>
    <dd>30</dd>
</dl>
<dl>
    <dt>occupation</dt>
    <dd>Engineer</dd>
</dl>

Using key with v-for

The key attribute is crucial when rendering a list with v-for. It helps Vue identify each node and improve the efficiency of rendering.

Why use key?

• Uniqueness: it ensures that each item has a unique identity.
• Performance: it helps Vue in efficient updates and the re-rendering of the list.

Always provide a unique and stable key when using v-for.

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

Here, item.id is used as a key, ensuring that each item has a unique identifier.

You can also use v-for to access both the item and its index (key) within the array. This is particularly useful if you want to display the position of each item in the list.

<template>
  <ul>
    <li v-for="(item, key) in items" :key="key">
      Item {{ key + 1 }}: {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['Apple', 'Banana', 'Cherry']);
</script>

In this example, v-for is used to iterate over the items array, and both the item and its index (key) are accessible within the loop. By using the index as a key, Vue can efficiently manage the rendered list, and it also allows you to display the position of each item in the list. And here is the result rendered:

<ul>
    <li> Item 1: Apple</li>
    <li> Item 2: Banana</li>
    <li> Item 3: Cherry</li>
</ul>

• Item 1: Apple
• Item 2: Banana
• Item 3: Cherry

Conclusion

Vue 3's v-for is a tool to render lists, be it from an array or object properties. Here's a quick recap:

• v-for a directive for rendering lists in Vue 3.
• It utilizes the syntax v-for="item in items" to loop through arrays.
• It can also iterate over the properties of an object.
• The key attribute is essential for rendering efficiency and uniqueness.

Now you can confidently render lists in Vue 3 with the v-for directive. Happy coding!