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.

Practice

1. What is the main purpose of v-model in Vue?

easy

A. To define component props

B. To fetch data from an API

C. To conditionally render elements

D. To create two-way binding between form inputs and component data

Solution

1. Step 1: Understand what v-model does

   v-model connects form inputs to data so changes in one update the other automatically.

2. Step 2: Compare with other Vue features

   Fetching data, conditional rendering, and props are unrelated to two-way binding.

3. Final Answer:

   To create two-way binding between form inputs and component data -> Option D

4. Quick Check:

   v-model = two-way binding [OK]

Hint: Remember: v-model syncs input and data automatically [OK]

Common Mistakes:

• Confusing v-model with fetching data
• Thinking v-model controls rendering
• Mixing v-model with props definition

2. Which of the following is the correct syntax to bind a text input to a data property name using v-model?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct v-model syntax

   The correct syntax is v-model="propertyName" without colon or extra suffix.

2. Step 2: Check each option

   uses correct syntax. wrongly uses colon. uses v-bind incorrectly. misplaces the property and type.

3. Final Answer:

   <input v-model="name" type="text" /> -> Option C

4. Quick Check:

   v-model="name" is correct syntax [OK]

Hint: v-model is used without colon and directly on input [OK]

Common Mistakes:

• Adding colon before v-model
• Using v-bind instead of v-model
• Incorrect attribute order or names

3. Given this Vue component data and template:

data() { return { message: 'Hello' } }
<input v-model="message" />
<p>{{ message }}</p>

What will be displayed in the paragraph after the user types "Hi" in the input?

medium

A. Hi

B. undefined

C. {{ message }}

D. Hello

Solution

1. Step 1: Understand v-model behavior

   Typing in the input updates the message data property immediately.

2. Step 2: Check template interpolation

   The paragraph displays the current value of message, which changes to "Hi" after typing.

3. Final Answer:

   Hi -> Option A

4. Quick Check:

   Input changes update message = Hi [OK]

Hint: v-model updates data instantly, reflected in template [OK]

Common Mistakes:

• Thinking paragraph stays static
• Confusing interpolation syntax
• Assuming input does not update data

4. What is wrong with this code snippet?

<input v-model="userName">

Assuming userName is defined in data, why might this cause an error?

medium

A. v-model cannot be used on input elements

B. Missing closing tag for input element

C. userName is not reactive

D. v-model requires a colon prefix

Solution

1. Step 1: Check HTML syntax

   The input tag is not self-closed or properly closed, which is invalid in Vue templates.

2. Step 2: Understand Vue template rules

   Input elements must be self-closed like <input /> or have a closing tag.

3. Final Answer:

   Missing closing tag for input element -> Option B

4. Quick Check:

   Input tags must be closed [OK]

Hint: Always close input tags with /> in Vue templates [OK]

Common Mistakes:

• Forgetting to close input tags
• Thinking v-model needs colon
• Assuming v-model can't be on inputs

5. You want to bind a checkbox to a data property isChecked using v-model. Which code snippet correctly implements this with two-way binding and shows "Checked" or "Not checked" text accordingly?

hard

A. {{ isChecked ? 'Checked' : 'Not checked' }}

B. {{ isChecked ? 'Checked' : 'Not checked' }}

C. {{ isChecked }}

D. {{ isChecked }}

Solution

1. Step 1: Identify correct checkbox binding

   Using v-model="isChecked" binds the checkbox state two-way with the data property.

2. Step 2: Verify conditional display

   The paragraph uses a ternary expression to show "Checked" or "Not checked" based on isChecked.

3. Final Answer:

   <input type="checkbox" v-model="isChecked" /> <p>{{ isChecked ? 'Checked' : 'Not checked' }}</p> -> Option A

4. Quick Check:

   Checkbox v-model + conditional text =

   {{ isChecked ? 'Checked' : 'Not checked' }}

   [OK]

Hint: Use v-model on checkbox for two-way binding [OK]

Common Mistakes:

• Using :checked instead of v-model
• Wrong attribute names like v-model.checked
• Not updating data on checkbox toggle