Latihan 1: Watchers — Vue

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

Starter-nya sudah punya const count = ref(0), <span id="count">{{ count }}</span>, dan <button id="inc" @click="count++">+1</button>; semuanya tetap. Tambahkan watcher yang mencatat setiap perubahan:

Di bawah count, tulis watch(count, (newVal) => { ... }).
Di dalam callback-nya, tulis console.log("Count:", newVal).

Yang dicek:

Halaman punya #count.
Kodemu memanggil watch( atau watchEffect(.
Setelah #inc diklik sekali, #count berisi 1.
Setelah klik itu, console menulis Count: 1: kata Count: lalu nilai barunya.

Hint

Mencatat ke console setiap kali angkanya berubah itu efek samping, jadi pakai watcher, bukan computed.
watch menerima dua hal: sumber yang diawasi (count) dan fungsi yang dijalankan setiap sumber itu berubah. Fungsi itu menerima nilai barunya sebagai argumen pertama.
watch(count, (newVal) => { console.log("Count:", newVal) })

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Watchers — Vue

Hint

Memperbarui Aplikasi