v-for with Ionic Components​

When usingv-for with Ionic components, we recommend using Vue'skey attribute. This allows Vue to re-render loop elements in an efficient way by only updating the content inside of the component rather than re-creating the component altogether.

By usingkey you can provide a stable identity for each loop element so Vue can track insertions and deletions within the iterator. Below is an example of how to usekey:

<template>
<ion-page>
<ion-content>
<ion-itemv-for="item of items":key="item.id">
<ion-label>{{ item.value}}</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>

<scriptsetuplang="ts">
import{IonContent,IonItem,IonLabel,IonPage}from'@ionic/vue';
import{ ref}from'vue';

const items=ref([
{id:0,value:'Item 0'},
{id:1,value:'Item 1'},
...
]);
</script>

In this example, we have an array of objects calleditems. Each object contains avalue and anid. Using thekey attribute, we pass theitem.id for each object. Thisid is used to provide a stable identity for each loop element.

For more information on how Vue manages state withv-for seehttps://v3.vuejs.org/guide/list.html#maintaining-state

• v-for with Ionic Components