Latihan 2: Async Components — Vue

Latihan 2 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 const loaded = ref(false), biarkan. Buat komponen yang baru dimuat saat dibutuhkan:

Di script, buat Lazy dengan Vue.defineAsyncComponent. Loader-nya fungsi yang mengembalikan Promise berisi komponen, pengganti import("./Lazy.vue") yang gak ada di editor:

const Lazy = Vue.defineAsyncComponent(() =>
  Promise.resolve({ template: `<div id="lazy">Komponen berhasil dimuat!</div>` })
)

Di dalam <div>, tulis <button id="load" @click="loaded = true">Muat Komponen</button>.
Di bawahnya, <component v-if="loaded" :is="Lazy" />.

Yang dicek:

Ada #load, dan sebelum diklik #lazy belum ada.
Sesudah #load diklik, #lazy berisi persis Komponen berhasil dimuat!.
Kodemu memanggil defineAsyncComponent(.

Hint

defineAsyncComponent menerima loader: fungsi yang mengembalikan Promise berisi komponen. Vue baru memanggil loader itu saat komponennya pertama kali dirender.
Ambil defineAsyncComponent dari objek Vue, karena baris import gak boleh di editor. Loader-nya cukup () => Promise.resolve({ template: ... }), lalu tampilkan Lazy lewat <component :is> yang diberi v-if="loaded".
const Lazy = Vue.defineAsyncComponent(() => Promise.resolve({ template: `<div id="lazy">Komponen berhasil dimuat!</div>` })) lalu <button id="load" @click="loaded = true">Muat Komponen</button> <component v-if="loaded" :is="Lazy" />

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Async Components — Vue

Hint

Memperbarui Aplikasi