v-model for two-way binding in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value using v-model.

Vue

<template>
  <input type="text" [1]="name" />
  <p>Your name is: {{ name }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Av-if

Bv-model

Cv-bind

Dv-for

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model will only bind the value one way.

Using v-if or v-for here does not bind input value.

The v-model directive creates a two-way binding between the input and the variable name.

2fill in blank

medium

Complete the code to initialize the reactive variable for v-model.

Vue

<script setup>
import { [1] } from 'vue'
const message = [2]('Hello')
</script>

Drag options to blanks, or click blank then click option'

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a simple string.

Using computed or watch which are not for creating reactive variables.

Use ref to create a reactive variable that works with v-model.

3fill in blank

hard

Fix the error in the code to correctly bind the checkbox with v-model.

Vue

<template>
  <input type="checkbox" [1]="checked" />
  <p>Checked: {{ checked }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Av-model

Bv-bind

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind will not update the variable when checkbox changes.

Using v-if or v-show does not bind input state.

Checkboxes use v-model to bind their checked state to a variable.

4fill in blank

hard

Fill both blanks to create a two-way binding with a select dropdown.

Vue

<template>
  <select [1]="[2]">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <p>Selected color: {{ color }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Av-model

Bcolor

Cvalue

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model for two-way binding.

Binding to 'value' attribute instead of the variable.

The v-model directive binds the color variable to the select's value for two-way binding.

5fill in blank

hard

Fill all three blanks to create a two-way binding with a textarea and display its length.

Vue

<template>
  <textarea [1]="[2]"></textarea>
  <p>Length: {{ [3].length }}</p>
</template>

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

Drag options to blanks, or click blank then click option'

Av-model

Btext

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' attribute instead of v-model for binding.

Displaying length of a wrong variable.

Use v-model to bind the textarea to text. Display the length with text.length.

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