Repeated contacts

An outer formlet arranges six contact boxes created by a loop. Each box owns a separate Data branch: c1, c2, through c6. The relative field bindings stay identical, so editing one contact leaves the others unchanged.

Example · Vue

Code

How it works · Vue

A loop initializes six contact objects, then v-for renders one section for each index. Every binding names the corresponding c1–c6 object, and :key identifies the section. CSS Grid controls how many cards fit across the panel.

How it compares

Vue’s v-for already makes repeated UI concise. Gramlot’s relative field paths stay unchanged as each card receives a different datapath; this Vue recipe indexes the contact object in each binding. Extracting a Vue card component could remove that repetition, but would add a component and its data interface. Gramlot provides inherited scope out of the box; its card helper only groups declarations. Vue already includes repetition through v-for.