Tutorial Vue Js - Cara Membuat Form Input Bindings

Assalamualaikum, wr. wb. teman-teman. Kali ini kita akan belajar bagaimana Cara Membuat Form Input Binding dengan Vue Js. Buat kalian yang langsung nyasar kesini, saya sarankan untuk melihat tutorial awal Vue Js yang pertama Disini. Dan tutorial kedua yang menjelaskan aplikasi yang digunakan sebagai kode editor dan untuk demo atau menjalankan kode pada tutorial kita Disini. Kita akan menggunakan Codepen untuk kode editornya.

BACA: Cara Menggunakan IF-ELSE pada Vue Js

Sekilas tentang Form Input Binding, yaitu sebuah fitur yang terdapat pada Vue Js sehingga kita dapat menampilkan value apa yang kita inputkan pada field secara real-time. Atau disebutnya sebagai two-way data bindings.

Oke langsung saja ke tutorialnya, silahkan ketikkan kode ini untuk Javascriptnya.

• Baris 1: Seperti biasa kita harus instansiasi object Vue, Oh ya jangan lupa import CDN Vue Js-nya agar kode Vue Js-nya bisa jalan.
• Baris 2: Kita definisikan nama elemen yang akan menggunakan data Vue kita.
• Baris 3 - 9: Kita buat beberapa object berbeda dengan value string kosong.

Selanjutnya buat kode HTML-nya seperti berikut.

• Baris 3 - 4: Kita buat input dengan v-model="pesan_input" sehingga ketika ketikkan value pada field input tersebut, maka akan mengisi pada object pesan_input dan akan langsung ditampilkan / diupdate pada baris ke-4 yang sudah kita binding dengan {{ pesan_input }}.
• Baris 6 - 8: Sama seperti sebelumnya, namun yang ini kita menggunakan textarea dan outputnya kita tambahkan style "white-space: pre-line" sehingga ketika memberikan baris baru / enter maka outputnya juga akan mengikuti memberikan efek baris baru.
• Baris 10 - 11: Sama dengan input yang pertama, cuma saja kita tambahkan input modifier berupa "lazy" yang mana value akan ditampilkan pada data binding ketika kita memfokuskan cursor kita ke area lain setelah mengetikkan value-nya. Silahkan dicoba sendiri pada Demo dibawah ya.
• Baris 13 - 14: Kita gunakan input modifier juga berupa "number" agar user hanya bisa menginputkan data berupa angka.
• Baris 16 - 17: Kita gunakan input modifier berupa "trim" untuk menghilangkan spasi yang berlebih baik dari awal maupun akhir teks.

Untuk Demo-nya silakan cek dibawah ini.

See the Pen Vue JS Form Input Binding by indeveloper.id (@indeveloper) on CodePen.

Jadi ada 5 poin yang kita pelajari dari tutorial kali ini:

1. Cara membuat value bindings dengan form input.
2. Cara membuat value bindings dengan form textarea.
3. Cara menggunakan input modifier "lazy".
4. Cara menggunakan input modifier "number".
5. Cara menggunakan input modifier "trim"

Sekian tutorial kali ini, semoga bermanfaat, sekian Wassalamualaikum, wr. wb.