v-model for two-way binding in Vue - Mini Project: Build & Apply

Using v-model for Two-Way Binding in Vue

📖 Scenario: You are building a simple Vue app where users can type their name into an input box. The app will show the typed name live below the input.

🎯 Goal: Create a Vue component that uses v-model to bind an input field to a data variable. When the user types in the input, the displayed text updates automatically.

📋 What You'll Learn

Create a reactive variable called name with an initial empty string.

Add an <input> element bound to name using v-model.

Display the current value of name in a <p> tag below the input.

Use Vue 3 Composition API with <script setup> and ref.

💡 Why This Matters

🌍 Real World

Two-way binding with v-model is common in forms, search boxes, and interactive UI where user input needs to update the app state instantly.

💼 Career

Understanding v-model is essential for Vue developers to build responsive and accessible user interfaces that react to user input smoothly.

1

Set up the reactive variable

Inside the <script setup> block, import ref from 'vue' and create a reactive variable called name initialized to an empty string ''.

Vue

// Import ref and create reactive variable 'name' with ''
// Your code here



  

Hint

Use import { ref } from 'vue' and then const name = ref('') to create a reactive string.

2

Add the input with v-model

In the <template> section, add an <input> element that uses v-model to bind to the reactive variable name.

Vue

import { ref } from 'vue'

const name = ref('')



  
  

Hint

Use <input v-model="name" type="text" /> to bind the input to the variable.

3

Display the reactive variable

Below the <input>, add a <p> tag that displays the current value of the reactive variable name using Vue's mustache syntax {{ name }}.

Vue

import { ref } from 'vue'

const name = ref('')



  
   tag to show the value of 'name' here -->
  

Hint

Use <p>Your name is: {{ name }}</p> to show the live value.

4

Add accessibility and finalize

Add an aria-label attribute with the value "Name input" to the <input> element to improve accessibility.

Vue

import { ref } from 'vue'

const name = ref('')



  
  
  
  Your name is: {{ name }}

Hint

Add aria-label="Name input" inside the <input> tag for screen readers.

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