Vue – individuelles Component Iteration-Template definieren

Tutorial Vue

von Ardian Shala, 10.03.2019
Die Directive v-slot erlaubt nicht nur das Platzieren von Content, sondern auch das Bereitstellen eines individuellen Templates für Iterations-Elemente.
Vorraussetzung:

Downloads:

Stackblitz Demo

Listen-Struktur

Für die List-Component wird von einem Array mit folgender Struktur ausgegangen:

data: [{ id: 1, label: 'First Item' }, { id: 2, label: 'Second Item' }]

List Component erstellen

Zu Demonstrationszwecken wird eine einfache Listen-Component erstellt, welche Daten in Form eines Arrays erwartet.
Hierfür wird die Propertydata definiert, welche anschließend iteriert wird.
Das Iterations-Element – hier entry – wird im Slot mit dem Namen itemTemplate ausgegeben. (Der Name des Slots ist hierbei frei gewählt)

const MyList = Vue.component('my-list', {
    props: ['data'],
    template: `
        <ul>
            <li v-for="entry in data" :key="entry.id">
                <slot name="itemTemplate" :item="entry">
                    {{ entry.label }}
                </slot>
            </li>
        </ul>
    `
});

Component ohne individuelles Template verwenden

Zuerst wird die Default-Ausgabe dargestellt.
Hierfür wird das zu Beginn definierte Array data an die gleichnamige Property data der List-Component gebunden.

<MyList :data="data" />

Die Ausgabe sollte wie folgt aussehen:

  • First Item
  • Second Item

Angepasst Listen-Struktur

Für das individuelle Template wird die Struktur der Liste ein wenig verändert.
Dies soll verdeutlichen, dass das Template auch Properties behandeln kann, die in dem angepassten Array enthalten sind.
Hierfür wird die Property isChecked innerhalb eines Objekts definiert.

data: [{ id: 1, label: 'First Item', isChecked: true }, { id: 2, label: 'Second Item', isChecked: false }]

Individuelles Template festlegen

Der data-Property der Component MyList wird das geänderte Array data zugewiesen.
Doch innerhalb der Component-Tags wird nun das template-Tag verwendet und mittels v-slot-Directive der Slot-Name itemTemplate angesprochen, welcher das Iterations-Element bereitstellt – hier item
Innerhalb der template-Tags kann nun ein individuelles Template definiert werden.

<MyList :data="data">
    <template v-slot:itemTemplate="{ item }">
        <div style="display: flex;">
            <input type="checkbox" :checked="item.isChecked" />
            {{ item.label }}
        </div>
    </template>
</MyList>

Die Ausgabe sollte nun wie folgt aussehen:

  • First Item
  • Second Item
#customtemplate #scoped-slot #slot #template #v-for #vue

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.