Vue.js – individuelles Component Iteration-Template definieren

Downloads:

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 Property – data 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