Latihan 1: Event Handling — Vue
Latihan 1 dari materi Event Handling di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya const count = ref(0) dan <span id="count">{{ count }}</span> di dalam <div>, biarkan. Ganti komentar TODO dengan sebuah tombol:
<button id="inc" @click="count++">+1</button>, di dalam <div> yang sama.
Yang dicek:
- Sebelum diklik,
#count berisi 0.
- Kodenya memakai
@click.
- Sekali klik
#inc, #count berisi 1.
- Dua kali klik,
#count berisi 2.
Hint
- Klik ditangani dengan @click di tombolnya. Isinya boleh perintah pendek yang menaikkan count, karena di template ref dibaca tanpa .value.
- Tombolnya ber-id inc dan bertuliskan +1. Taruh @click="count++" di tombol itu, di dalam div yang sama dengan span-nya.
- <button id="inc" @click="count++">+1</button>
