v-model for two-way binding in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is v-model in Vue?

v-model is a directive in Vue that creates a two-way binding between form input elements and component data. It keeps the data and the input in sync automatically.

beginner

How does v-model simplify handling user input?

Instead of writing separate code to listen for input events and update data, v-model automatically updates the data when the user types and updates the input if the data changes.

beginner

Which HTML elements commonly use v-model for two-way binding?

Common elements are <input> (text, checkbox, radio), <textarea>, and <select>. v-model works with these to sync user input with data.

intermediate

How do you use v-model with a custom component?

You define a modelValue prop and emit an update:modelValue event. Then v-model binds to modelValue and listens for the event to update the data.

beginner

What happens if you change the data bound by v-model programmatically?

The input element updates automatically to reflect the new data value. This shows the two-way binding keeps data and UI in sync both ways.

What does v-model do in Vue?

A Only updates input when data changes

B Creates two-way binding between data and input

C Only updates data when input changes

D Binds CSS classes to elements

v-model keeps data and input in sync both ways automatically.

Which event does v-model listen to on a text input by default?

A input

B submit

C change

D click

v-model listens to the input event to update data as the user types.

How do you bind v-model to a custom component's value?

A Use <code>value</code> prop and <code>input</code> event

B Use <code>v-on</code> only

C Use <code>v-bind</code> only

D Use <code>modelValue</code> prop and <code>update:modelValue</code> event

Vue 3 uses modelValue and update:modelValue for v-model on custom components.

Which of these elements does NOT support v-model by default?

A <code>&lt;input type='text'&gt;</code>

B <code>&lt;select&gt;</code>

C <code>&lt;div&gt;</code>

D <code>&lt;textarea&gt;</code>

v-model works with form elements, not plain div elements.

If you update the data bound by v-model in code, what happens to the input?

A Input updates to new data value

B Input stays the same

C Input clears

D Input disables

The input updates automatically to reflect the changed data, showing two-way binding.

Explain how v-model creates two-way binding in Vue and why it is useful.

Think about how data and input stay in sync automatically.

Describe how to implement v-model on a custom Vue component.

Vue 3 uses a special prop and event for custom components.

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