點燈坊

失くすものさえない今が強くなるチャンスよ

Using x-model with Textarea

Sam Xiao's Avatar 2022-01-25

We can implement two-way data binding with <textarea> by x-model.

Version

Alpine 3.9

x-model

area000

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 variable
  • x-text : display the value of a variable

Conclusion

  • <textarea> is two-way data binding to a variable by x-model

Reference

Alpine, Textarea