v-model with text inputs in Vue - Mini Project: Build & Apply

Binding Text Inputs with v-model in Vue

📖 Scenario: You are building a simple contact form for a website. The form needs to collect the user's first name and last name. You want the form inputs to update the data automatically as the user types.

🎯 Goal: Create a Vue component that uses v-model to bind two text input fields to data properties called firstName and lastName. The component should display the full name below the inputs, updating live as the user types.

📋 What You'll Learn

Create a Vue component with data properties firstName and lastName initialized as empty strings.

Add two text input fields bound with v-model to firstName and lastName respectively.

Display the full name by combining firstName and lastName below the inputs.

Use the Composition API with <script setup> and ref for reactive data.

💡 Why This Matters

🌍 Real World

Forms on websites often need to update data as users type. Using v-model in Vue makes this easy and reactive.

💼 Career

Understanding v-model and reactive data binding is essential for frontend developers working with Vue to build interactive user interfaces.

1

Set up the initial data properties

Create two reactive variables called firstName and lastName using ref from Vue. Initialize both as empty strings.

Vue

  



import { ref } from 'vue'

// Create firstName and lastName as refs with empty strings
// Your code here

Hint

Use import { ref } from 'vue' and then create const firstName = ref('') and const lastName = ref('').

2

Add text input fields with v-model

Inside the <template>, add two <input> elements of type text. Bind the first input's value to firstName using v-model and the second input's value to lastName using v-model.

Vue

  
  



import { ref } from 'vue'

const firstName = ref('')
const lastName = ref('')

Hint

Use <input type="text" v-model="firstName" /> and similarly for lastName.

3

Display the full name dynamically

Below the inputs in the <template>, add a <p> element that shows the full name by combining firstName and lastName with a space between them. Use Vue's mustache syntax to display {{ firstName }} {{ lastName }}.

Vue

  
  
  
  



import { ref } from 'vue'

const firstName = ref('')
const lastName = ref('')

Hint

Use <p>Full Name: {{ firstName }} {{ lastName }}</p> to show the combined names.

4

Add accessibility and final touches

Add aria-label attributes to both input fields with values "First Name" and "Last Name" respectively. Also, add autocomplete attributes with values "given-name" for first name and "family-name" for last name to improve user experience.

Vue

  
  
  Full Name: {{ firstName }} {{ lastName }}
  
  



import { ref } from 'vue'

const firstName = ref('')
const lastName = ref('')

Hint

Add aria-label and autocomplete attributes inside the input tags for better accessibility and user experience.

Practice

1. What does v-model do when used on a text input in Vue?

easy

A. It listens for clicks on the input but does not update the value.

B. It only sets the initial value of the input but does not update data.

C. It creates a two-way binding between the input and a data property.

D. It disables the input field from user interaction.

Solution

1. Step 1: Understand v-model purpose

   v-model connects the input's value with a Vue data property, syncing changes both ways.

2. Step 2: Compare options with v-model behavior

   Only It creates a two-way binding between the input and a data property. describes this two-way binding correctly; others describe incorrect or unrelated behaviors.

3. Final Answer:

   It creates a two-way binding between the input and a data property. -> Option C

4. Quick Check:

   v-model = two-way binding [OK]

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

Common Mistakes:

• Thinking v-model only sets initial value
• Confusing v-model with event listeners
• Assuming v-model disables input

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct v-model syntax

   The correct syntax uses v-model="username" on the input element.

2. Step 2: Check input type and binding

   <input v-model="username" type="text" /> uses correct syntax and input type text. <input :v-model="username" type="text" /> incorrectly uses colon binding. <input v-bind:model="username" type="text" /> misuses v-bind. <input v-model='username' type='checkbox' /> uses checkbox type, not text.

3. Final Answer:

   <input v-model="username" type="text" /> -> Option A

4. Quick Check:

   Correct v-model syntax = [OK]

Hint: Use v-model="property" without colon for text inputs [OK]

Common Mistakes:

• Adding colon before v-model
• Using v-bind:model instead of v-model
• Mismatching input type with v-model usage

3. Given this Vue component code:

const app = Vue.createApp({
  data() {
    return { message: 'Hello' };
  }
});

// Template:
// <input v-model="message" type="text" />
// <p>{{ message }}</p>

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

medium

A. Hello

B. {{ message }}

C. An empty string

D. Hi Vue

Solution

1. Step 1: Understand v-model effect on data

   Typing in the input updates the message data property immediately due to two-way binding.

2. Step 2: Check paragraph binding

   The paragraph displays {{ message }}, so it shows the updated value typed by the user.

3. Final Answer:

   Hi Vue -> Option D

4. Quick Check:

   Input changes update message = displayed text [OK]

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

Common Mistakes:

• Thinking paragraph shows initial value only
• Confusing mustache syntax as literal text
• Assuming input does not update data

4. What is wrong with this Vue template snippet?

<input v-model="userName" type="text" />
<p>User: {{ username }}</p>

Why does the paragraph not update when typing in the input?

medium

A. v-model cannot be used on text inputs.

B. The data property is named differently from the template binding.

C. The input type should be "password" for v-model to work.

D. Must use v-bind instead of v-model for inputs.

Solution

1. Step 1: Compare data property and template usage

   The input uses v-model="userName" but paragraph uses {{ username }} with different casing.

2. Step 2: Understand Vue is case-sensitive

   Vue treats userName and username as different properties, so paragraph does not update.

3. Final Answer:

   The data property is named differently from the template binding. -> Option B

4. Quick Check:

   Case mismatch breaks binding = The data property is named differently from the template binding. [OK]

Hint: Check exact spelling and casing of data and template names [OK]

Common Mistakes:

• Assuming v-model doesn't work on text inputs
• Thinking input type affects v-model binding
• Confusing v-bind and v-model usage

5. You want to create a form with two text inputs bound to firstName and lastName using v-model. You also want to display the full name live as the user types. Which Vue template snippet correctly achieves this?

hard

A.

Full Name: {{ firstName + ' ' + lastName }}

B.

Full Name: {{ firstName & lastName }}

C.

Full Name: {{ firstName.concat(lastName) }}

D.

Full Name: {{ firstName + lastName }}

Solution

1. Step 1: Check how full name is constructed

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + ' ' + lastName }}</p> concatenates firstName and lastName with a space, showing a proper full name.

2. Step 2: Analyze other options for correctness

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName & lastName }}</p> uses & which is invalid in JS expressions. <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName.concat(lastName) }}</p> uses concat without space, so names join without space. <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + lastName }}</p> concatenates without space, so names run together.

3. Final Answer:

   <input v-model="firstName" type="text" /> <input v-model="lastName" type="text" /> <p>Full Name: {{ firstName + ' ' + lastName }}</p> -> Option A

4. Quick Check:

   Use + with space to join strings in template [OK]

Hint: Use + ' ' + to join strings with space in mustache [OK]

Common Mistakes:

• Using & instead of + for string join
• Forgetting space between names
• Using concat without space