Vue · all subjects

form binding

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

v-model syntactic sugar expansion

v-model on a native input element expands to :value binding and @input event handler. For example, `<input v-model="searchText" />` expands to `<input :value="searchText" @input="searchText = $event.target.value" />`.

v-model on component expands to prop and event

When used on a component, `v-model="foo"` expands to `:modelValue="foo" @update:modelValue="$event => (foo = $event)". The child component must bind the modelValue prop to its input's value attribute and emit 'update:modelValue' event with the new value.

defineModel macro in Vue 3.4+

Starting in Vue 3.4, the recommended way to implement v-model in a component is using the defineModel() macro in <script setup>. The macro accepts an optional string as the first argument for the prop name, and optional prop options. It returns a ref whose .value is synced with the parent v-model and can be mutated like any other ref. Example: `const model = defineModel()` or `const model = defineModel('title')` or `const model = defineModel({ required: true })`.

defineModel expands to modelValue prop and update:modelValue event

The defineModel() macro expands to: a prop named modelValue (or the custom name if provided), and an event named update:modelValue (or update:{customName}). This is what the compiler generates under the hood.

v-model arguments syntax

v-model can accept an argument using the syntax `v-model:argumentName="value"`. For example, `<MyComponent v-model:title="bookTitle" />`. In the child component using Composition API, pass the argument name as a string to defineModel: `const title = defineModel('title')`.

Multiple v-model bindings on single component

A single component can have multiple v-model bindings by using different argument names. Each v-model syncs to a different prop without requiring extra options. Example: `<UserName v-model:first-name="first" v-model:last-name="last" />` corresponds to `const firstName = defineModel('firstName')` and `const lastName = defineModel('lastName')` in the child.

Accessing v-model modifiers in defineModel

When using defineModel(), modifiers can be accessed by destructuring the return value: `const [model, modifiers] = defineModel()`. The modifiers object contains boolean flags for each modifier (e.g., `{ capitalize: true }` for `v-model.capitalize="value"`).

defineModel get and set options for modifiers

defineModel() accepts `get` and `set` options to transform values based on modifiers. The `set` option receives the value and should return a transformed value. Example: `const [model, modifiers] = defineModel({ set(value) { if (modifiers.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1) } return value } })`.

Options API v-model with modelValue prop and update:modelValue event

In Options API, implement v-model by declaring 'modelValue' in props and 'update:modelValue' in emits. Bind the modelValue prop to the input's :value and emit the event on @input. Example: `props: ['modelValue'], emits: ['update:modelValue']` with template `<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />`.

Options API computed property for v-model implementation

An alternative Options API approach is using a writable computed property with both getter and setter. The getter returns modelValue and the setter emits the update:modelValue event. Then bind the computed property to the input with v-model. Example: `computed: { value: { get() { return this.modelValue }, set(value) { this.$emit('update:modelValue', value) } } }`.

Options API v-model arguments use custom prop and event names

For v-model with arguments in Options API, the child component receives a prop with the argument name and emits an event named 'update:{argumentName}'. Example: for `<MyComponent v-model:title="value" />`, use `props: ['title'], emits: ['update:title']`.

Options API modelModifiers prop for v-model modifiers

In Options API, modifiers are accessed via a modelModifiers prop that defaults to an empty object. Declare it as: `modelModifiers: { default: () => ({}) }`. For v-model with arguments and modifiers, the prop is named `{arg}Modifiers`. Example: for `v-model:title.capitalize`, use prop `titleModifiers`.

v-model with arguments and modifiers naming convention

When using v-model with both an argument and modifiers (e.g., `v-model:title.capitalize="myText"`), the generated prop name for modifiers in Options API is `{arg}Modifiers` (e.g., `titleModifiers`).

Give your agent this brain