How to Set and  Reset Value  of Textarea in Alpine js

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/alpinejs@3.x.x/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

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

How to Set and Reset Value of Textarea in Alpine js v2


Tags: