Latihan 2: Event Handling — Vue

Latihan 2 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 pesan = ref("...") dan <p id="pesan">{{ pesan }}</p>, biarkan. Lengkapi dua TODO:

Di script, ganti komentar TODO dengan fungsi yang mengubah pesannya: const sapa = () => { pesan.value = "Halo!" }.
Di template, ganti komentar TODO dengan <button id="greet" @click="sapa">Sapa</button>. Tanpa kurung, karena sapa gak butuh argumen.

Yang dicek:

Sebelum diklik, #pesan berisi ....
Sesudah #greet diklik, #pesan berisi persis Halo!.
Tombolnya memanggil fungsi dari script, @click="sapa", bukan perintah yang mengubah pesan langsung di template.

Hint

Fungsi di script mengubah isi ref pesan, dan tombolnya memanggil fungsi itu lewat @click.
Di script, ubah ref lewat .value: pesan.value = "Halo!". Di template, tombol ber-id greet memakai @click="sapa".
const sapa = () => { pesan.value = "Halo!" } lalu di template <button id="greet" @click="sapa">Sapa</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Event Handling — Vue

Hint

Memperbarui Aplikasi