Attribute fallthrough and $attrs in Vue

Vue interview exercise on Props & events, difficulty 2 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.

Write TextField, usable with v-model (`modelValue` string, `update:modelValue`), with a prop `label`: a <label class="field"> wrapping a <span> with the label text and an <input>. Everything else the parent passes (placeholder, class, data-*, id…) must land on the <input>, not on the label: set inheritAttrs: false and bind $attrs on the input.

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.

More Props & events in Vue

All Vue exercises · Other languages and frameworks