Latihan 2: List Rendering Svelte — Svelte

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

Kode awal sudah punya array users berisi { id: 1, name: "Andi" } dan { id: 2, name: "Budi" }, dan <ul> kosong. Biarkan keduanya.

Di dalam <ul>, buka perulangan berkunci dengan nomor urut: {#each users as user, i (user.id)}.
Di dalamnya, tulis <li>{i + 1}. {user.name}</li>, lalu tutup dengan {/each}.

i dimulai dari 0, jadi tambahkan 1 supaya nomornya mulai dari 1.

Yang dicek:

Paling sedikit 2 <li> di dalam <ul>.
<li> pertama berisi persis 1. Andi, dan <li> terakhir berisi persis 2. Budi (angka, titik, satu spasi, nama).
Kodemu memakai {#each users, dan key-nya ditulis dalam kurung: (user.id).
Array users masih memuat name: "Andi" dan name: "Budi".

Hint

Perulangan berkunci memakai id tiap user supaya Svelte mengenali barisnya. Selain item, perulangan juga bisa memberi nomor putaran yang dimulai dari 0.
Tulis {#each users as user, i (user.id)}: nama item, koma, nama index, lalu key dalam kurung. Di <li>, geser nomornya dengan i + 1, lalu titik, spasi, dan user.name.
<ul> {#each users as user, i (user.id)} <li>{i + 1}. {user.name}</li> {/each} </ul>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: List Rendering Svelte — Svelte

Hint

Memperbarui Aplikasi