We can implement two-way data binding with <textarea>
by x-model
.
Version
Alpine 3.9
x-model
The textarea is two-way binding to a variable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/alpinejs" defer></script>
<title>Alpine</title>
</head>
<body x-data="{ message: '' }">
<textarea x-model="message"></textarea>
<div x-text="message" />
</body>
</html>
Line 9
<body x-data="{ message: '' }">
<textarea x-model="message"></textarea>
<div x-text="message" />
</body>
x-model
: two-way data binding the input value to a variablex-text
: display the value of a variable
Conclusion
<textarea>
is two-way data binding to a variable byx-model