Latihan 1: Async Components — Vue

Latihan 1 dari materi Async Components di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya Riwayat, komponen objek dengan async setup() yang menunggu 0,1 detik sebelum siap; template-nya <div id="content">Konten async dimuat</div>. Biarkan. Komponen dengan setup async cuma tampil di dalam <Suspense>. Di bawah garis ---template---, ganti komentar TODO dengan:

<Suspense> sebagai pembungkus.
Di dalamnya, <component :is="Riwayat" />.
Di dalamnya juga, <template #fallback> berisi <div id="loading">Memuat...</div>, tampilan selama Riwayat belum siap.

Yang dicek:

Sesudah Riwayat siap, #content berisi persis Konten async dimuat, dan #loading sudah hilang.
Kodemu memakai <Suspense>.
<div id="loading"> ada di dalam <template #fallback> (atau v-slot:fallback).

Hint

Riwayat punya setup async, jadi Vue menunggunya selesai. Yang mengatur tampilan selama menunggu adalah <Suspense>: slot default berisi komponennya, slot fallback berisi tampilan sementara.
Di dalam <Suspense>, tulis <component :is="Riwayat" />, lalu <template #fallback> berisi div ber-id loading. Begitu setup-nya selesai, Suspense menukar fallback dengan Riwayat.
<Suspense> <component :is="Riwayat" /> <template #fallback><div id="loading">Memuat...</div></template> </Suspense>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Async Components — Vue

Hint

Memperbarui Aplikasi