Setelah mengenal kegunaan bantuan Computed Property dan bantuan Methods, kali ini kita akan berkenalan dengan bantuan lain yang juga berguna untuk mengolah data kompleks, yaitu dengan bantuan Watcher.

Dengan menggunakan kata kunci watch. Seperti namanya, fitur ini melihat perubahan yang terjadi saat suatu aksi dilakukan.

Pada contoh program yang akan kita buat dikenalkan sebuah directive baru bernama v-model yang berfungsi untuk menangkap nilai dari sebuah input, directive v-model ini akan dipelajari lebih jelas pada tutorial berikutnya.

Kembali lagi ke topik diawal, nilai yang terdapat pada Bantuan Watcher dari Vue Js adalah merupakan sebuah fungsi dari variable yang ada. Pada file HTML, kita hanya akan membuat tampilannya saja:

Setelah teman-teman coba isi pada form input tsb, maka akan muncul teks Keterangan yaa teman-teman. Nah berarti Bantuan Watcher dari Vue Js akan berfungsi ketika kita mengisi pada form input tsb. Begitulah kerja dari Bantuan Watcher dari Vue Js.

Pola yang lain juga dapat Bantuan Watcher dari Vue Js lakukan adalah dengan berkolaborasi dengan methods, misalnya untuk menampilkan hasil yang sama.

Kita juga bisa memberi sebuah kondisi atau syarat, disini saya akan memberikan contoh. Semisal teman-teman ketiknya ‘juara’ maka keterangan yang muncul adalah ‘Semangat pagi’. Kita tinggal ubah sedikit saja scriptnya, seperti dibawah ini yaa:

Kita menggunakan if kondisional yang mirip pada bahasa pemograman PHP, kita beri syarat ketika kita mengetik kata “juara” maka keterangan yang muncul adalah “Semangat pagi”, selain kata “juara” yang akan kita ketik maka keterangan yang muncul tetap “Sedang mengetik…”