Data iterators
The v-data-iterator component is used for displaying arbitrary data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.
Usage
The v-data-iterator allows you to customize exactly how to display your data. In this example we are using a grid with cards.
<v-data-iterator :items="items" :page="page" :items-per-page="3">
<template v-slot:default="{ items }">
<template
v-for="(item, i) in items"
:key="i"
>
<v-card v-bind="item.raw"></v-card>
<br>
</template>
</template>
<template v-slot:footer="{ pageCount }">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
</template>
</v-data-iterator><script setup>
import { ref } from 'vue'
const page = ref(1)
const items = Array.from({ length: 15 }, (k, v) => ({
title: 'Item ' + v + 1,
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
}))
</script>API
| Component | Description |
|---|---|
| v-data-iterator | Primary Component |
Anatomy
The recommended placement of elements inside of a v-data-iterator are:
- Place a v-toolbar or similar component above the main content
- Place content after the header
- Place a v-pagination below the main content
| Element / Area | Description |
|---|---|
| 1. Header (optional) | The header is used to display a title and actions |
| 2. Container | The container is the root element of the component |
| 3. Footer (optional) | The footer is used to display pagination |
Guide
The v-data-iterator component is used for displaying data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.
The following code snippet is an example of a basic v-data-iterator component:
<v-data-iterator :items="[1, 2, 3, 4, 5]">
<template v-slot:default="{ items }">
<v-list-item
v-for="(item, i) in items"
:key="i"
:title="`Item ${i}`"
></v-list-item>
</template>
</v-data-iterator>
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-data-iterator component.
Slots
The v-data-iterator component has 4 main slots
Default
The v-data-iterator has internal state for both selection and expansion, just like v-data-table. In this example we use the methods isExpanded and toggleExpand available on the default slot.
Frozen Yogurt
Ice cream sandwich
Eclair
Cupcake
Controllable props
Sorting, filters and pagination can be controlled externally by using the individual props
Loader props
Loader can be used to change loader on “loading” prop