Dynamic Form Fields
Add and remove input rows dynamically using data-list for form arrays.
Live Demo
Source
HTML + JavaScript
<div data-component="dynamic-form">
<div data-list="members">
<template>
<div style="display: flex; gap: 0.5rem;">
<input data-model="memberName" data-model-trim>
<input type="email" data-model="memberEmail">
<select data-model="memberRole">
<option value="member">Member</option>
<option value="lead">Lead</option>
</select>
<button data-action="removeMember">✕</button>
</div>
</template>
</div>
<button data-action="addMember">+ Add Member</button>
</div>
<script>
wildflower.component('dynamic-form', {
state: {
members: [
{ memberName: 'Alice', memberEmail: 'alice@example.com', memberRole: 'lead' },
{ memberName: 'Bob', memberEmail: 'bob@example.com', memberRole: 'member' }
]
},
computed: {
summary() {
const leads = this.members.filter(m => m.memberRole === 'lead').length;
return this.members.length + ' members, ' + leads + ' leads';
}
},
addMember() {
this.members.push({ memberName: '', memberEmail: '', memberRole: 'member' });
},
removeMember(e, el, { index }) {
this.members.splice(index, 1);
}
});
</script>Key Points
data-listworks naturally for form arrays. Each row is a list item with its owndata-modelbindingsdata-model="memberName"inside the template binds to each item's property, two-way per row- Add rows with
push(), remove withsplice(index, 1). Standard array operations - Computed
summaryreacts to any change across all rows (additions, removals, role changes)