v-model for two-way binding in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using v-model on a custom component?

Consider a Vue 3 component using v-model on a custom child component. What will be the value of parentValue after typing 'hello' in the input?

Vue

<template>
  <ChildComponent v-model="parentValue" />
  <p>{{ parentValue }}</p>
</template>

<script setup>
import { ref } from 'vue'
const parentValue = ref('')
</script>

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

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

A The paragraph shows 'hello' as typed in the input.

B The paragraph remains empty because v-model does not work on custom components.

C The paragraph shows '[object Object]' instead of the typed text.

D Typing in the input causes an error because 'modelValue' is not defined.

💡 Hint

Remember that v-model on custom components uses modelValue prop and update:modelValue event by default.

Using v-model on a custom component binds the modelValue prop and listens for update:modelValue events. The child emits the updated value, so the parent parentValue updates and displays the typed text.

📝 Syntax

intermediate

Which option correctly uses v-model with a custom argument name?

Vue 3 allows customizing the v-model argument name. Which code snippet correctly binds v-model:checked to a child component?

A

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

// Child props: { modelValue: Boolean }
// Emits: 'update:modelValue'

B

<ChildComponent v-model="isChecked" />

// Child props: { checked: Boolean }
// Emits: 'update:checked'

C

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

// Child props: { checked: Boolean }
// Emits: 'update:checked'

D

<ChildComponent v-model="isChecked" />

// Child props: { checked: Boolean }
// Emits: 'update:modelValue'

💡 Hint

Custom v-model arguments require matching prop and event names in the child.

When using v-model:checked, the child must accept a checked prop and emit update:checked events. Option C matches this pattern correctly.

🔧 Debug

advanced

Why does this v-model binding not update the parent value?

Given this parent and child component code, why does typing in the input not update parentText?

Vue

<!-- Parent.vue -->
<template>
  <ChildComponent v-model="parentText" />
  <p>{{ parentText }}</p>
</template>
<script setup>
import { ref } from 'vue'
const parentText = ref('')
</script>

<!-- ChildComponent.vue -->
<template>
  <input :value="text" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script setup>
const props = defineProps({ text: String })
</script>

A The parent ref is not reactive, so it does not update.

B The parent template is missing a key attribute on ChildComponent.

C The input event is not emitted correctly because of missing event modifiers.

D The child uses prop 'text' but emits 'update:modelValue', so the binding fails.

💡 Hint

Check if the prop name and emitted event name match the v-model default.

The default v-model expects a prop named modelValue and emits update:modelValue. Here, the child uses text prop instead, so the binding does not work.

❓ state_output

advanced

What is the value of 'count' after clicking the button twice?

In this Vue 3 component, what will be the value of count after clicking the button two times?

Vue

<template>
  <button @click="increment">Click me</button>
  <p>{{ count }}</p>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value += 1
  count.value += 1
}
</script>

A 4

B 2

C 1

D 0

💡 Hint

Each click calls increment which adds 2 to count.

The increment function adds 1 twice per click, so each click increases count by 2. After two clicks, count is 4.

🧠 Conceptual

expert

Which statement best describes how v-model works internally in Vue 3?

Choose the most accurate description of how v-model enables two-way binding in Vue 3 components.

A <code>v-model</code> automatically syncs all props and emits all events between parent and child without explicit code.

B <code>v-model</code> binds a prop named <code>modelValue</code> and listens for <code>update:modelValue</code> events to update the parent state reactively.

C <code>v-model</code> uses a global event bus to communicate changes between components.

D <code>v-model</code> requires the child component to mutate the parent's reactive state directly.

💡 Hint

Think about the prop and event naming conventions v-model uses.

Vue 3's v-model works by binding a prop (default modelValue) and listening for an event (default update:modelValue) to update the parent's reactive state. It does not mutate parent state directly or use a global event bus.