1---
2title: Textarea Interpolation is One-Way Only - Use v-model for Two-Way Binding
3impact: HIGH
4impactDescription: Using {{ text }} inside textarea displays initial value but user input does NOT update the ref
5type: capability
6tags: [vue3, v-model, forms, textarea, interpolation, template]
7---
8 
9# Textarea Interpolation is One-Way Only - Use v-model for Two-Way Binding
10 
11**Impact: HIGH** - Interpolation in textarea (`{{ text }}`) provides one-way binding only - it displays the initial value but user input does NOT update the ref. This creates a confusing disconnect where the textarea shows content but edits are silently lost.
12 
13Unlike v-model which provides two-way binding, interpolation only renders the initial ref value into the textarea. When users type, the ref remains unchanged, making form submissions return stale data. Always use v-model for two-way binding in textareas.
14 
15## Task Checklist
16 
17- [ ] Never use interpolation inside textarea tags
18- [ ] Always use v-model for textarea two-way binding
19- [ ] Search codebase for `<textarea>{{` patterns that may be silently broken
20- [ ] Add linting rules to catch this pattern if possible
21 
22**Incorrect:**
23```html
24<script setup>
25import { ref } from 'vue'
26 
27const message = ref('Hello World')
28</script>
29 
30<template>
31  <!-- WRONG: One-way binding only! Shows initial value but edits don't update ref -->
32  <textarea>{{ message }}</textarea>
33 
34  <!-- Also WRONG: User can type but changes are lost -->
35  <textarea>{{ userBio }}</textarea>
36 
37  <!-- The textarea displays content but ref never updates -->
38</template>
39```
40 
41**Correct:**
42```html
43<script setup>
44import { ref } from 'vue'
45 
46const message = ref('Hello World')
47</script>
48 
49<template>
50  <!-- CORRECT: Use v-model for textarea -->
51  <textarea v-model="message"></textarea>
52 
53  <!-- For read-only display, still use v-model or :value -->
54  <textarea v-model="message" readonly></textarea>
55 
56  <!-- Or one-way binding with :value -->
57  <textarea :value="message" readonly></textarea>
58</template>
59```
60 
61```html
62<!-- With placeholder and other attributes -->
63<textarea
64  v-model="message"
65  placeholder="Enter your message..."
66  rows="5"
67  maxlength="500"
68></textarea>
69```
70 
71## Reference
72- [Vue.js Form Input Bindings - Multiline text](https://vuejs.org/guide/essentials/forms.html#multiline-text)
73