javascript / intermediate
Snippet
Dynamischer Komponentenwechsel mit Object Mapping
Anstatt lange v-if/v-else Ketten zu nutzen, ist die Verwendung des <component>-Elements mit einer dynamischen :is Bindung und einem Objekt-Mapping ein saubereres, skalierbares Muster für bedingtes Rendering.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup>import AdminView from './AdminView.vue';import UserView from './UserView.vue';import GuestView from './GuestView.vue';const roleMap = {admin: AdminView,user: UserView,guest: GuestView};const userRole = ref('user');</script><template><component :is="roleMap[userRole]" /></template>
vue
Erklärung
1
const roleMap = { ... }
Mapping von Schlüsseln auf Komponentendefinitionen für O(1) Suche.
2
<component :is="roleMap[userRole]" />
Vues eingebautes Element, um Komponenten basierend auf einer Variable zu rendern.