Mengenal Form pada Vue JS

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membahas tentang Mengenal Form pada Vue JS. Dimana form ini berisi input text, textarea dan juga input radio button. Untuk mendapatkan nilai atau value dalam tag input html kita bisa menggunakan v-model yang ada pada Vue JS. Langsung saja teman-teman buat struktur html untuk dapat Mengenal Form pada Vue JS seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Form pada Vue JS</title>
    <style type="">
        #apps{
            background: salmon;
            color:gray;
            width: 800px;
            margin: auto;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
        

<div id="apps">    
            <!-- TEXTAREA -->
            <textarea v-model="textarea_pesan" cols="40" rows="10"></textarea>
            <p style="white-space: pre-line;">{{textarea_pesan}}</p>

            <!-- INPUT TEXT -->
            <input type="" name="" v-model="input_pesan">
            <p>{{input_pesan}}</p>

            <!-- RADIO BUTTON -->
            <input type="radio" name="" v-model="val_checkbox" value="laki-laki"> Laki-laki
            <input type="radio" name="" v-model="val_checkbox" value="perempuan"> Perempuan
            <p>{{val_checkbox}}</p>
        </div>

</body>

</html>

Khusus untuk textarea saya menggunakan style="white-space: pre-line;" pada tag p untuk membaca baris baru pada textarea.

Lalu teman-teman jangan lupa sisipkan link library dari Vue JS yang bisa kalian dapatkan di halaman resmi Vue JS dan berikut ini linknya

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Dan kemudian tahap terakhir dalam pembahasan Mengenal Form pada Vue JS yaitu teman-teman buat objek Vue seperti script di bawah ini.

<script type="">
            var app = new Vue({
                el: "#apps",
                data: {
                    textarea_pesan: '',
                    input_pesan: '',
                    val_checkbox: ''
                }
            })
        </script>

Jika teman-teman buka di halaman browser dan langsung melakukan input data maka akan secara langsung pula data akan tampil di bawahnya dalam tag p yang sudah di berikan kurung kurawel ganda sesuai nama variabel masing-masing. Seperti pada gambar di bawah ini.

Demikian artikel tentang  Mengenal Form pada Vue JS, semoga artikel ini dapat bermanfaat untuk teman-teman Dumet School. Dan buat kalian yang sedang mempelajari Vue JS silahkan bisa langsung di praktekannya dan explore lebih banyak mengenai form seperti select option, checkbox dan masih banyak lagi. Sampai jumpa di pembahasan selanjutnya dan selamat mencoba.