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/[email protected]^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


After Click


Tags: