Tentang Input Binding Pada Vue Js

Tidak kalah menarik karena dibagian ini kita akan melihat cara menghubungkan sebuah inputan dengan system two way data binding. Tentu kita masih membahas tentang Vue Js-nya jadi ada banyak sekali fitur fitur yang bisa kita terapkan untuk membuat web kita lebih interaktif. Contohnya langsung saja yang pertama kita akan buat tag <input> dengan type text sebagai struktur HTMLnya dimana semua inputannya kita akan tambahkan directive v-model sebagai berikut

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-1

V Modelnya tentu isinya adalah nama. Misalnya saya berikan nama fullname

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-2

Jadi dimana saja bila kita ingin menampilkannya hasil outputnya kita tinggal menggunakan binding expresions lalu cetak fullnamenya sebagai berikut

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-3

Dan bila kita lihat dibagian browsernya tentu kosong secara default tapi bila teman teman mulai mengetik text apapun dibagian inputannya maka secara otomatis tampil berdasarkan apa kita tulis

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-4

Jadi bila teman teman ingin membuat sistem live preview atau apapun yang konsepnya seperti hal diatas dengan menyambungkan inputan textnya maka v-model ini sangat tepat untuk digunakan. Nah tentu selain input type text kita pun bisa memberikan directive v-model dengan nama yang sama kedalam input checkboxnya lalu dengan value yang berbeda beda sebagai berikut

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-5

Diatas saya sudah buat beberapa input checkboxnya dan bila kita ingin menampilkan hasil outputnya sama seperti sebelumnya yakni mencetak nama variabel yang sesuai dengan nilai dari v-model yang kita tentukan. Karena nama v-modelnya bisa saja lebih dari satu maka kita harus definisikan dari awal di object datanya untuk memberi tahu bila lessons ini sebagai variabel array

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-6

Bila sudah seperti itu kita sudah bisa pilih atau check maka dia akan mengambil nilai valuenya untuk ditampilkan satu persatu dan nilai satu dengan nilai lainnya dipisahkan dengan koma bila teman teman check semuanya

Tentang-Input-Binding-Pada-Vue-Js-28-04-2017-7

Dan hal ini pun akan berlaku untuk bagian input radio atau pun input-input yang lainnya seperti select option atau pun textareanya. Tapi bedanya checkbox dengan radio adalah checkbox bisa memilih banyak pilihan sedangkan radio kita hanya bisa memilih satu pilihan. Jadi sekali lagi tiap mau menyambungkan sebuah input dengan data modelnya kita tinggal menggunakan directive v-model pada Vue Js. Terima kasih

28 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat