Latihan 2: Watchers — Vue

Latihan 2 dari materi Watchers di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya status (mulai "Buka"), catatan (mulai "Belum ada perubahan"), <select id="status"> dengan pilihan Buka, Tutup, dan Istirahat, dan <p id="catatan">{{ catatan }}</p>; semuanya tetap. Catat setiap pergantian status:

Tulis watch(status, (baru, lama) => { ... }).
Di dalam callback-nya, isi catatan.value dengan lama + " ke " + baru.

Teks ini butuh nilai lama, dan computed cuma tahu nilai sekarang. Itu pekerjaan watcher.

Yang dicek:

Sebelum ada pergantian, #catatan berisi Belum ada perubahan.
Kodemu memanggil watch( atau watchEffect(.
Setelah status diganti ke Tutup, #catatan berisi persis Buka ke Tutup.
Setelah itu diganti ke Istirahat, #catatan berisi persis Tutup ke Istirahat.

Hint

Callback watch menerima dua nilai: yang baru dan yang lama. Nilai lama itulah yang gak bisa didapat computed.
Awasi status dengan watch. Di callback (baru, lama), susun teks dari nilai lama, kata ke, lalu nilai baru, dan simpan ke catatan.value.
watch(status, (baru, lama) => { catatan.value = lama + " ke " + baru })

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Watchers — Vue

Hint

Memperbarui Aplikasi