How to Use v-model with Textarea in Vue

Use v-model on a <textarea> element to create two-way data binding between the textarea content and a Vue component's data property. This keeps the textarea value and the data property in sync automatically.

Syntax

The v-model directive binds the value of a <textarea> to a data property in your Vue component. When the user types in the textarea, the data property updates automatically, and if the data property changes, the textarea content updates too.

Syntax parts:

• <textarea>: The HTML element for multi-line text input.
• v-model="propertyName": Binds the textarea's content to the Vue data property propertyName.

vue

<textarea v-model="message"></textarea>

Example

This example shows a Vue component with a textarea bound to a message data property using v-model. Typing in the textarea updates the message, and the message is displayed below in real time.

vue

<template>
  <div>
    <textarea v-model="message" rows="4" cols="50" aria-label="Message input"></textarea>
    <p><strong>Typed message:</strong> {{ message }}</p>
  </div>
</template>

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

Output

A textarea box appears with 4 rows and 50 columns. Below it, the typed text appears live as you type.

Common Pitfalls

Common mistakes when using v-model with <textarea> include:

• Not initializing the bound data property, causing the textarea to be uncontrolled.
• Using value attribute instead of v-model, which breaks two-way binding.
• Forgetting to import or use ref or reactive in Vue 3's <script setup>.

vue

<!-- Wrong: Using value attribute disables two-way binding -->
<textarea value="Hello"></textarea>

<!-- Right: Use v-model for two-way binding -->
<textarea v-model="message"></textarea>

Quick Reference

• Use v-model on <textarea> for two-way binding.
• Initialize the bound data property with ref('') or reactive.
• Use aria-label or aria-labelledby for accessibility.
• Textarea updates live as user types and data changes.

Key Takeaways

Use v-model on <textarea> for automatic two-way data binding.

Always initialize the bound data property to avoid uncontrolled inputs.

Avoid using the value attribute directly on <textarea> when using Vue.

Add accessibility attributes like aria-label for better user experience.

Vue updates the textarea content and data property in sync as the user types.