Custom v-model on components in Vue - Step-by-Step Execution

Concept Flow - Custom v-model on components

Parent uses v-model on Child

↓

Child receives 'modelValue' prop

↓

Child emits 'update:modelValue' event

↓

Parent updates bound variable

↓

Re-render Parent and Child with new value

The parent binds a variable using v-model to the child. The child uses 'modelValue' prop and emits 'update:modelValue' to update the parent variable, causing re-render.

Execution Sample

Vue

/* Parent.vue */
<CustomInput v-model="text" />

/* CustomInput.vue */
props: ['modelValue'],
emits: ['update:modelValue'],
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

Parent binds 'text' to CustomInput using v-model; CustomInput uses 'modelValue' prop and emits 'update:modelValue' on input change.

Execution Table

Step	Parent Variable 'text'	Child Prop 'modelValue'	Child Emits	Parent Updates 'text'	Rendered Input Value
1	""	""	None	""	"" (empty input)
2	""	""	User types 'H'	Emits 'update:modelValue' with 'H'	"H"
3	"H"	"H"	User types 'He'	Emits 'update:modelValue' with 'He'	"He"
4	"He"	"He"	User types 'Hel'	Emits 'update:modelValue' with 'Hel'	"Hel"
5	"Hel"	"Hel"	User types 'Hell'	Emits 'update:modelValue' with 'Hell'	"Hell"
6	"Hell"	"Hell"	User types 'Hello'	Emits 'update:modelValue' with 'Hello'	"Hello"
7	"Hello"	"Hello"	No input	No change	"Hello"

💡 User stops typing; no new events emitted; parent and child values stay synced.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
text (Parent)	""	"H"	"He"	"Hel"	"Hell"	"Hello"	"Hello"
modelValue (Child)	""	"H"	"He"	"Hel"	"Hell"	"Hello"	"Hello"

Key Moments - 3 Insights

Why does the child component use 'modelValue' as the prop name?

Because Vue's custom v-model expects the prop to be named 'modelValue' by default, so the parent can bind using v-model.

How does the parent know when the child input changes?

The child emits 'update:modelValue' event with the new value, which the parent listens to and updates its variable accordingly.

What happens if the child emits a different event name than 'update:modelValue'?

The parent will not update the bound variable automatically, breaking the v-model two-way binding.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'text' in the parent after Step 3?

A "Hel"

B "H"

C "He"

D "Hello"

💡 Hint

Check the 'Rendered Input Value' column at Step 3 in the execution_table.

At which step does the child emit 'update:modelValue' with the value 'Hell'?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look at the 'Parent Updates \'text\'' column in the execution_table for the value 'Hell'.

If the child emitted 'update:value' instead of 'update:modelValue', what would happen?

A Parent variable 'text' would not update automatically

B Parent variable 'text' updates normally

C Child input value resets to empty

D Vue throws an error

💡 Hint

Refer to the key_moments about event names and their effect on parent updates.

Concept Snapshot

Custom v-model on components:
- Parent uses <Child v-model="var" />
- Child receives 'modelValue' prop
- Child emits 'update:modelValue' event with new value
- Parent updates bound variable automatically
- Enables two-way binding between parent and child
- Event name and prop name must match Vue's convention

Full Transcript

In Vue, custom v-model allows a parent component to bind a variable to a child component's input. The parent uses v-model on the child, which passes the variable as a 'modelValue' prop. The child emits 'update:modelValue' events when the input changes. This event updates the parent's variable, keeping both in sync. The execution table shows the parent's variable and child's prop updating step-by-step as the user types. Key points include the required prop name 'modelValue' and event name 'update:modelValue' for this to work. If the event name differs, the parent won't update automatically. This pattern creates a smooth two-way binding between parent and child components.

Practice

1. What is the default prop name used in a Vue component to work with v-model?

easy

A. inputValue

B. value

C. vModel

D. modelValue

Solution

1. Step 1: Understand Vue's default v-model prop

   Vue uses modelValue as the default prop name to bind data from parent to child.

2. Step 2: Recall the default event name

   The event emitted to update the parent is update:modelValue, matching the prop name.

3. Final Answer:

   modelValue -> Option D

4. Quick Check:

   Default prop for v-model = modelValue [OK]

Hint: Default v-model prop is always 'modelValue' [OK]

Common Mistakes:

• Using 'value' as default prop
• Confusing event name with prop name
• Assuming 'vModel' is default prop

2. Which of the following is the correct syntax to use a custom v-model named checked on a component?

easy

A. <MyCheckbox v-model:checked="isChecked" />

B. <MyCheckbox v-model.checked="isChecked" />

C. <MyCheckbox v-model_checked="isChecked" />

D. <MyCheckbox v-modelChecked="isChecked" />

Solution

1. Step 1: Recall custom v-model syntax

   Vue uses v-model:customName syntax to bind custom model names.

2. Step 2: Match syntax with options

   Only <MyCheckbox v-model:checked="isChecked" /> uses the correct colon syntax for custom v-model binding.

3. Final Answer:

   <MyCheckbox v-model:checked="isChecked" /> -> Option A

4. Quick Check:

   Custom v-model uses colon syntax [OK]

Hint: Use colon for custom v-model names: v-model:customName [OK]

Common Mistakes:

• Using dot instead of colon
• Using underscore instead of colon
• Using camelCase without colon

3. Given this child component code:

props: ['modelValue'],
methods: {
  updateValue(val) {
    this.$emit('update:modelValue', val)
  }
}

And parent usage:

<ChildComponent v-model="parentData" />

What happens when updateValue('new') is called inside the child?

medium

A. The child's modelValue prop changes to 'new'.

B. Nothing happens because event name is wrong.

C. The parent's parentData updates to 'new'.

D. An error occurs because updateValue is not defined.

Solution

1. Step 1: Understand event emission in child

   The child emits update:modelValue with the new value, which Vue listens to for v-model updates.

2. Step 2: Effect on parent data

   The parent bound to v-model receives the event and updates parentData to 'new'.

3. Final Answer:

   The parent's parentData updates to 'new'. -> Option C

4. Quick Check:

   Child emits update:modelValue -> parent updates [OK]

Hint: Child emits update:modelValue event to update parent data [OK]

Common Mistakes:

• Thinking prop changes inside child
• Confusing event name with prop name
• Assuming no update without v-model modifier

4. Identify the error in this child component code for custom v-model named checked:

props: ['checked'],
methods: {
  updateChecked(val) {
    this.$emit('update:checked', val)
  }
}

Parent uses:

<MyCheckbox v-model:checked="isChecked" />

medium

A. Event name should be update:modelValue for custom v-model.

B. Prop name and event name are correct for custom v-model checked.

C. Prop name should be modelValue instead of checked.

D. The method should emit checked event, not update:checked.

Solution

1. Step 1: Check prop and event names for custom v-model

   For v-model:checked, the prop must be checked and event update:checked.

2. Step 2: Verify code matches custom v-model pattern

   The code uses props: ['checked'] and emits update:checked, which is correct.

3. Final Answer:

   Prop name and event name are correct for custom v-model checked. -> Option B

4. Quick Check:

   Custom v-model uses matching prop and update:event [OK]

Hint: Custom v-model uses prop and event names matching the model name [OK]

Common Mistakes:

• Using default modelValue prop for custom v-model
• Emitting wrong event name
• Confusing event and prop names

5. You want to create a component ToggleSwitch that uses a custom v-model named active. Which of these code snippets correctly implements the child component's props and emits to support this?

hard

A. props: ['active'],
methods: {
toggle() {
this.$emit('update:active', !this.active)
}
}

B. props: ['modelValue'],
methods: {
toggle() {
this.$emit('update:modelValue', !this.modelValue)
}
}

C. props: ['active'],
methods: {
toggle() {
this.$emit('update:modelValue', !this.active)
}
}

D. props: ['modelValue'],
methods: {
toggle() {
this.$emit('update:active', !this.modelValue)
}
}

Solution

1. Step 1: Match prop and event names to custom v-model name

   For v-model:active, the prop must be active and event update:active.

2. Step 2: Check each option for correct prop and event

   props: ['active'],
   methods: {
     toggle() {
       this.$emit('update:active', !this.active)
     }
   }

   uses props: ['active'] and emits update:active, matching the custom v-model name.

3. Final Answer:

   props: ['active'], methods: { toggle() { this.$emit('update:active', !this.active) } } -> Option A

4. Quick Check:

   Custom v-model prop and event must match model name [OK]

Hint: Custom v-model prop and event must match the model name exactly [OK]

Common Mistakes:

• Mixing default modelValue with custom names
• Emitting wrong event name
• Using wrong prop name for custom v-model