javascript / intermediate
Snippet
Controlling Multi-Step Form Branching via Map Conditions
Managing dynamic wizard workflows using nested `if/else` or `switch` blocks quickly creates fragile control flows. Structuring transitions as predicate callbacks in a JavaScript `Map` decouples step navigation logic from template rendering and allows data-driven routing decisions based on intermediate user input.
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
Breakdown
1
const stepTransitions = new Map([
Constructs a keyed Map pairing current step identifiers with transition decision functions.
2
['account_type', (data) => data.accountType === 'business' ? 'vat_details' : 'personal_info'],
Evaluates user state conditionally to select the next wizard node dynamically.
3
currentStep.value = transitionFn(formData.value);
Executes the matching branch transition and updates the reactive current step indicator.