In this section you will see how to set value in from input or textare in alpine js. first you need to Initialize the components by using x-data . then give define empty value like input: ' '. after set the x-text value on text area to show result.
Now you need to click button set the value both button as you can see code below . Set value button will be show the result & clear value will be reset the value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>How to Set Value of Textarea in Alpine js </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div class="flex justify-center mt-8">
<div x-data="{ input : '' }">
<textarea class="p-2 text-sm border-2 rounded-md focus:border-blue-400" x-text="input"></textarea>
<div class="flex gap-4">
<button @click="input= 'Problems are not stop signs, they are guidelines'"
class="p-2 text-green-200 bg-green-400">Set Value</button>
<button @click="input= ''" class="p-2 text-gray-200 bg-gray-400">Clear Value</button>
</div>
</div>
</div>
</body>
</html>
Before Click
How to Set and Reset Value of Textarea in Alpine js v1
After Click
How to Set and Reset Value of Textarea in Alpine js v2
