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

Need a 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('')

Need a 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('')

Need a 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('')

Need a hint?

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