Pada tutorial sebelumnya, kita telah menerapkan binding data pada form bertipe textbox, namun textbox hanya menggunakan satu baris teks saja, bagaimana jika kita ingin mengetikkan sesuatu pada baris kedua, ketiga dan selanjutnya?
Jawabannya kita bisa menggunakan sebuah form model yang sudah di sediakan oleh HTML, yang bisa menangani inputan yang lebih dari satu baris, yaitu TextArea. TextArea sendiri mendukung penulisan multiline (lebih dari satu baris).
Jika teman-teman bertanya, lalu gimana penerapan v-model pada TextArea untuk membuat data Binding dengan TextArea Multiline pada Vue Js? Jawabannya adalah ada sedikit perbedaan dari tutorial Binding data pada Form bertipe TextBox yang sebelumnya. Kita membutuhkan sedikit tweak dengan css untuk memformat baris baru dari tombol enter ketika menginput teks. Biar ngga bingung kita langsung aja mengimplementasikannya ya
Seperti biasa untuk pertama kita buat struktur dasar HTML, lalu tambahkan TextArea, seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <textarea v-model="pesan" placeholder="Ketik disini"></textarea> <br> <p>Pesan Multiline Anda adalah:</p> <p style="white-space: pre-line">{{ pesan }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { pesan: '' } }); </script> </body> </html> |
Seperti yang sebelumnya sudah di bilang, kita disini menggunakan sedikit tweak dari CSS, kita menggunakan property white-space dengan value pre-line, sehingga jika kalian menekan tombol enter pada TextArea, secara otomatis teks pun menghasilkan baris baru, sehingga data Binding menggunakan TextArea Multiline tetap berjalan. Semoga bermanfaat.