Vue JS Forms and Validation 1 — Questions and Answers

Question 1: How does `v-model` work on a `<textarea>` element in Vue 3?

It binds the textarea's value to a data property, keeping it in sync with reactive state (Correct answer)
You must use :value and @change separately for textareas
It binds to the innerHTML property of the textarea
Textareas require a special v-model.textarea modifier

Correct answer: It binds the textarea's value to a data property, keeping it in sync with reactive state

`v-model` works the same on `<textarea>` as on `<input type="text">` — it binds to the element's `value` property and listens for `input` events.

`<textarea v-model="message">` binds `message` to the textarea's value bidirectionally. Note that unlike regular HTML where you put initial content between tags (`<textarea>Initial</textarea>`), with Vue you must use `v-model` or `:value` to set the initial value — content between tags is ignored. `v-model` is equivalent to `:value="message" @input="message = $event.target.value"`. The `.lazy` modifier changes the sync to fire on `change` (blur) instead of every keystroke.

Question 2: How do you bind a group of radio buttons to a single data value in Vue 3?

Use v-model on each radio input with the same data property; the value attribute determines what gets stored (Correct answer)
Use v-model.radio on each input
Bind :checked and @change to each radio manually
Use a single <RadioGroup> component

Correct answer: Use v-model on each radio input with the same data property; the value attribute determines what gets stored

All radio inputs in a group share the same `v-model` binding. When a radio is selected, its `value` attribute is assigned to the bound property.

`<input type="radio" v-model="picked" value="option1">` + `<input type="radio" v-model="picked" value="option2">`. Vue handles the mutual exclusion automatically — when you select option1, `picked` becomes `'option1'`. The currently selected radio has its `checked` attribute set by Vue. You can also use dynamic values with `:value="option.id"`. `v-model` on radios binds to the `checked` property for boolean comparisons with `value`, which is handled internally by Vue.

Question 3: What does the `v-model.number` modifier do?

Automatically coerces the input's string value to a JavaScript number (Correct answer)
Restricts the input to number characters only
Rounds the input value to the nearest integer
Formats the number with thousand separators

Correct answer: Automatically coerces the input's string value to a JavaScript number

HTML inputs always return strings. `.number` uses `parseFloat` to convert the input value to a number, so your data property receives a number instead of a string.

By default, `v-model` on `<input type="text">` stores a string. Even `<input type="number">` returns a string via the `value` property. The `.number` modifier calls `parseFloat(value)` on the input's value before storing it. If `parseFloat` returns `NaN`, the original string is stored. This is useful when you need to perform arithmetic with the value. Since Vue 3.4+, `<input type="number">` with `v-model` automatically applies number coercion, but `.number` is still needed for text inputs and for clarity.

Question 4: How do you prevent form submission and handle it in Vue 3?

<form @submit.prevent="handleSubmit"> (Correct answer)
<form onsubmit="return false">
<form @submit="preventDefault">
<form v-on:submit="stop">

Correct answer: <form @submit.prevent="handleSubmit">

`@submit.prevent` combines event listening with `preventDefault()` in Vue's declarative style, blocking the browser's default form submission and calling your handler.

`@submit.prevent` is the idiomatic Vue way to handle form submissions. The `.prevent` modifier calls `event.preventDefault()` automatically, so the browser won't navigate or reload the page. Your `handleSubmit` method can then validate data, call an API, update state, etc. The equivalent without the modifier would be: `@submit="onSubmit"` with `function onSubmit(e) { e.preventDefault(); ... }`. Vue's modifier approach keeps event handling declarative and the method focused on business logic rather than event management.

Question 5: How do you handle checkbox binding with an array in Vue 3?

Use v-model bound to an array; checked checkboxes push their value into the array (Correct answer)
Use :checked and @change with array.indexOf
Use v-model.array on each checkbox
Checkboxes cannot be bound to arrays with v-model

Correct answer: Use v-model bound to an array; checked checkboxes push their value into the array

When `v-model` is bound to an array, Vue automatically adds the checkbox's `value` to the array when checked and removes it when unchecked.

`const selected = ref([]); // <input type="checkbox" v-model="selected" value="apple">` When the apple checkbox is checked, Vue adds `'apple'` to the `selected` array. When unchecked, it removes it. The array then contains only the values of checked checkboxes. For boolean single checkboxes, `v-model` binds to `true`/`false`. You can use `true-value` and `false-value` attributes to customize what values are stored: `<input type="checkbox" v-model="agree" true-value="yes" false-value="no">`.

Question 6: What library is commonly recommended for form validation in Vue 3?

VeeValidate or Vuelidate (Correct answer)
Formik
React Hook Form
Angular Forms

Correct answer: VeeValidate or Vuelidate

VeeValidate and Vuelidate are the two main Vue 3 form validation libraries. VeeValidate uses a declarative template-driven approach; Vuelidate is model-based and Composition API friendly.

VeeValidate v4 is built for Vue 3 with Composition API support. It uses `useField` and `useForm` composables (or the `<Form>` and `<Field>` components) and integrates with schema validators like Yup and Zod. Vuelidate v2 is a simpler, model-based validator where you define validation rules as an object and check `v$` in your template. For simple cases, many developers implement their own validation using `ref`, `computed`, and watchers. Formik and React Hook Form are React libraries and don't apply to Vue.

Vue JS Forms and Validation 1

How does `v-model` work on a `` element in Vue 3?