Vue JS Forms and Validation 2

Question 1

How do you implement a basic validation that shows an error when a field is empty in Vue 3?

Accepted Answer

Use a computed property or watcher to check the field's value and set an error message ref

Answer

Custom validation in Vue 3 is implemented with reactive state — a computed property or watcher that checks the value and sets an error message, displayed conditionally with `v-if`.

Question 2

How do you use VeeValidate's `useField` composable in Vue 3?

Accepted Answer

const { value, errorMessage } = useField('fieldName', validationRule)

Answer

`useField` from VeeValidate v4 provides a field value ref and an error message ref tied to validation rules. It integrates with a parent `useForm` context.

Question 3

What is the purpose of `v-model.lazy` in Vue 3?

Accepted Answer

Syncs the input value on the `change` event instead of `input`, reducing update frequency

Answer

`.lazy` changes `v-model` to sync on the `change` event (typically on blur or Enter) rather than on every `input` event, reducing reactivity triggers while the user types.

Question 4

How do you reset a form in Vue 3 without a form validation library?

Accepted Answer

Reset each ref to its initial value manually, or use a reactive object and reassign it

Answer

Without a library, form reset means reassigning all reactive refs to empty/initial values. For objects, you can reassign `Object.assign(formData, initialValues)` or spread initial values.

Question 5

In Vue 3, how do you implement a select dropdown bound to an object value with `v-model`?

Accepted Answer

Bind v-model to a ref and use :value on options to bind to object references

Answer

Vue 3's `v-model` on select supports non-string values. Using `:value="option"` (not `value="..."`) binds the whole object, and Vue uses reference equality to determine the selected option.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Forms and Validation 2