Auf der Arbeit programmiere ich viel mit React und dort benutze ich auch sogenannte Fragments. Ein Fragment ist ein Pseudo Element, was als Container genutzt werden kann, um dort drin seine ganzen HTML Elemente zu lagern. Im Code sieht das in React folgendermaßen aus:
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>Das besondere an diesem Element ist jedoch, dass sobald es im Frontend gerendert wird, man diesen Container nicht mehr sieht.
Fragments in Vue.js
Natürlich wollte ich diese Funktion auch in meinen Vue.js Projekten haben und habe nach einer Alternative für vue gesucht.
Am Ende bin ich auf eine sehr einfache Lösung für Vue.js gestoßen. Templates.
Wenn man seine Elemente in ein Template Container packt, erfüllt es genau den selben Zweck wie die Fragments in React. Das sieht in Code folgendermaßen aus:
<template v-for="(foo, index) in bar">
<span v-if="foo.baz">My Custom Content</span>
<p>{{ foo.text }}</p>
</template>Dieser oben gezeigte Code erfüllt dieselbe Aufgabe wie die Fragments von React und ist sogar noch flexibler, da es inline Attribute wie z.B. v-for und v-if zulässt. Wenn Der Code gerendert wird, ist der template Container im Frontend nicht sichtbar.
Falls ihr ein Projekt mit Vue.js realisiert, solltet ihr diese Funktion auf jeden Fall im Hinterkopf behalten. Es wird euch sehr nützlich sein.
