Contact box

Group contact fields inside a labelled box. In Gramlot, the box sets datapath=contact and its fields use relative bindings such as ^.first_name. All four values belong to the contact branch of Data and update on focus out.

Example · Vue

Code

How it works · Vue

The fields bind to properties of one reactive contact object using v-model.lazy. A section and heading form the visual group, styled by the shared contact-box class. Each binding explicitly names its contact property.

How it compares

Both group fields around one contact. Gramlot declares the scope on the box and resolves relative bindings beneath it; this Vue template refers to contact properties explicitly. Vue could encapsulate the group as a component, but that is an additional abstraction to author. Gramlot already supplies inherited Data scope through the container; visual grouping and CSS alone are not the advantage.