Custom v-model on components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when using a custom v-model with a different prop name?

Consider a Vue 3 component MyInput that uses modelValue as the prop and emits update:modelValue. If you use v-model:customValue on MyInput but the component only listens to modelValue, what will be the displayed value?

Vue

<template>
  <MyInput v-model:customValue="text" />
  <p>{{ text }}</p>
</template>

<script setup>
import { ref } from 'vue'
import MyInput from './MyInput.vue'
const text = ref('hello')
</script>

<!-- MyInput.vue -->
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
const props = defineProps({ modelValue: String })
</script>

A The input is disabled and does not show any value.

B The input shows empty and typing updates 'text' correctly.

C The input shows 'hello' and typing updates 'text' correctly.

D The input shows empty but typing does not update 'text' because 'customValue' is not handled.

💡 Hint

Check if the prop and event names match the v-model argument.

Using v-model:customValue expects the component to accept a prop named customValue and emit update:customValue. Since MyInput only uses modelValue and update:modelValue, the modelValue prop is not bound, so the input shows empty but changes do not update the parent.

📝 Syntax

intermediate

Which option correctly defines a custom v-model with a different prop and event in Vue 3?

You want to create a component that uses v-model:checked where the prop is checked and the event is update:checked. Which code snippet correctly defines this?

A defineProps({ checked: Boolean }); emits: ['update:checked']

B defineProps({ modelValue: Boolean }); emits: ['update:checked']

C defineProps({ checked: Boolean }); emits: ['update:modelValue']

D defineProps({ modelValue: Boolean }); emits: ['update:modelValue']

💡 Hint

The prop and event names must match the v-model argument.

For v-model:checked, the component must accept a prop named checked and emit update:checked. Option A matches this pattern.

❓ state_output

advanced

What is the value of count after clicking the button twice in this custom v-model component?

Given the parent uses v-model:count with Counter component that emits update:count on button click, what is the final value of count?

Vue

<template>
  <Counter v-model:count="count" />
  <p>{{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Counter from './Counter.vue'
const count = ref(0)
</script>

<!-- Counter.vue -->
<template>
  <button @click="$emit('update:count', count + 1)">Increment</button>
</template>

<script setup>
const props = defineProps({ count: Number })
</script>

A 0

B 1

C NaN

D 2

💡 Hint

Check if the component uses the prop value correctly inside the emit.

The count in the template is undefined because const props = defineProps() does not expose props directly to the template scope. Thus, count + 1 is NaN, emitted on each click, so the parent count becomes NaN.

🔧 Debug

advanced

Why does this custom v-model component not update the parent value on input?

Analyze the code below. The parent uses v-model:inputValue but typing in the input does not update the parent. What is the cause?

Vue

<template>
  <input :value="inputValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
const props = defineProps({ inputValue: String })
</script>

A The emitted event name 'update:modelValue' does not match the prop 'inputValue'.

B The input element should use v-model instead of :value and @input.

C The prop 'inputValue' is not reactive in the parent component.

D The component is missing a default value for 'inputValue'.

💡 Hint

Check if the event name matches the prop name for the custom v-model.

For v-model:inputValue, the component must emit update:inputValue. Emitting update:modelValue breaks the binding.

🧠 Conceptual

expert

How does Vue 3 internally handle multiple custom v-model bindings on a single component?

When a component uses multiple v-model bindings like v-model:title and v-model:description, how does Vue 3 manage these bindings internally?

A Vue only supports one v-model per component; multiple bindings cause runtime errors.

B Vue creates separate props and emits for each model, matching <code>title</code> and <code>description</code> with <code>update:title</code> and <code>update:description</code> events respectively.

C Vue merges all v-model bindings into a single prop and event named <code>modelValue</code> and <code>update:modelValue</code>.

D Vue uses a global store to sync all v-model bindings across components automatically.

💡 Hint

Think about how Vue matches prop names and event names for each v-model argument.

Vue 3 supports multiple v-model bindings by creating separate props and events for each argument. For example, v-model:title uses prop title and event update:title, and similarly for description.

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