Forms & Validation — Chapter Quiz

Question 1

1

When v-model is bound to multiple checkboxes sharing the same name, the ref becomes:

AThe most recently clicked valueBA booleanCAn array of the checked valuesDA Set

Multiple checkboxes with one v-model collect the value of each checked box into an array.

Question 2

2

What does v-model.lazy="x" change?

ASyncs on change instead of inputBDebounces by 300msCDisables the inputDLazy-loads the component

.lazy makes v-model listen to change (e.g. blur on text inputs) instead of the per-keystroke input event.

Question 3

3

Which modifier coerces an input value to a number?

A.trimB.numberC.floatD.int

v-model.number coerces the input string to a Number when possible.

Question 4

4

defineModel() (Vue 3.4+) is used in a component to:

ADefine props and emits separatelyBImplement a custom v-model in one lineCConnect to PiniaDConfigure form validation

const model = defineModel<string>() gives the child a writable ref tied to the parent's v-model — no manual props/emits.

Question 5

5

VeeValidate is the dominant form-validation library in the Vue ecosystem.

TTrueFFalse

VeeValidate handles state, validation, and submission flow. It pairs nicely with Zod or Yup schemas.

Question 6

6

Why combine Zod with a Vue form library?

ATo replace TypeScriptBTo validate the shape and types of form data, with parsed-output types reused server-sideCTo gzip the formDTo enable SSR

Zod schemas validate at runtime and infer static types — write once, use on client and server.

Question 7

7

On a text input, v-model.___ strips leading and trailing whitespace.

v-model.trim trims whitespace from both ends of the input value as it syncs.

Question 8

8

Which patterns are common for handling form submission in Vue?

Select all that apply.

ADisable the submit button while a loading ref is trueBCall event.preventDefault() (or use @submit.prevent)CShow field-level errors next to inputsDReload the page after submitEReset the form after a successful submit

Modern SPA forms prevent the default submit, show inline errors, track loading, and reset on success. Full page reloads defeat the SPA model.

Test what you learned.