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



  

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



  
  

Need a 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 -->
  

Need a 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 }}

Need a hint?

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