Latihan 2 dari materi List Rendering di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya siswa (tiga object dengan properti nama: Ani, Budi, Cici) dan <ol id="daftar">, biarkan. Di dalam <ol>, ganti komentar TODO dengan satu <li> yang diulang:
Taruh v-for="(s, index) in siswa" dan :key="index" di <li>.
Isi <li> cuma nama siswanya: <li v-for="(s, index) in siswa" :key="index">{{ s.nama }}</li>.
Yang dicek:
Ada #daftar berisi minimal 3 <li>.
Kodenya memakai v-for dan :key.
<li> pertama di #daftar berisi persis Ani, dan yang terakhir persis Cici.
Gak ada <li> yang isinya diketik langsung (diawali huruf).
Hint
Tiap item di siswa adalah object, jadi isi <li> dibaca dari propertinya, bukan dari item-nya langsung.
Ambil index sebagai nama kedua di dalam kurung dan pakai sebagai key, lalu tampilkan s.nama di dalam <li>.
<li v-for="(s, index) in siswa" :key="index">{{ s.nama }}</li> di dalam <ol id="daftar">
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...