javascript / intermediate
Snippet
Steuern von mehrstufigen Formularverzweigungen über Map-Bedingungen
Die Steuerung dynamischer Assistenten-Abläufe über verschachtelte `if/else`- oder `switch`-Blöcke führt schnell zu fehleranfälligen Kontrollstrukturen. Das Strukturieren von Übergängen als Prädikatsfunktionen in einer JavaScript-`Map` entkoppelt die Navigationslogik von der Darstellung und ermöglicht datengesteuerte Verzweigungen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref } from 'vue';const currentStep = ref('account_type');const formData = ref({ accountType: 'business', vatRegistered: true });const stepTransitions = new Map([['account_type', (data) => data.accountType === 'business' ? 'vat_details' : 'personal_info'],['vat_details', (data) => data.vatRegistered ? 'company_id' : 'address_details'],['personal_info', () => 'address_details']]);function advanceStep() {const transitionFn = stepTransitions.get(currentStep.value);if (transitionFn) {currentStep.value = transitionFn(formData.value);}}
vue
Erklärung
1
const stepTransitions = new Map([
Erstellt eine Map, die aktuelle Schritt-Identifikatoren mit Übergangsfunktionen verknüpft.
2
['account_type', (data) => data.accountType === 'business' ? 'vat_details' : 'personal_info'],
Wertet den Zustand bedingt aus, um dynamisch den nächsten Schritt im Formular auszuwählen.
3
currentStep.value = transitionFn(formData.value);
Führt den ermittelten Zustandsübergang aus und aktualisiert den reaktiven Schritt-Zeiger.