Latihan 2: Reaktivitas Svelte — Svelte

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

Kode awal sudah punya let items = ["A", "B", "C"], biarkan. Di Svelte 4, tampilan cuma diperbarui oleh assignment, jadi items.push("D") saja gak cukup.

Tambahkan tombol Tambah yang menambahkan "D" lewat assignment dengan spread: <button on:click={() => items = [...items, "D"]}>Tambah</button>.
Tambahkan <p>Total: {items.length}</p>.

Penguji mengklik tombol bertulisan persis Tambah dan membaca <p> pertama.

Yang dicek:

Sebelum diklik, <p> berisi persis Total: 3.
Sesudah tombol Tambah diklik sekali, <p> berisi Total: 4.
Item yang ditambahkan adalah "D": [...items, "D"].

Hint

Svelte 4 cuma memperbarui tampilan saat variabelnya diberi nilai baru. push mengubah isi array tanpa assignment, jadi angkanya diam di 3.
Buat array baru berisi item lama ditambah D dengan spread, lalu berikan ke items. Paragrafnya menampilkan panjang items setelah tulisan Total dan titik dua.
<button on:click={() => items = [...items, "D"]}>Tambah</button> <p>Total: {items.length}</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Reaktivitas Svelte — Svelte

Hint

Memperbarui Aplikasi