Latihan 1 dari materi Teleport & KeepAlive di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya const showModal = ref(false) dan sebuah <div>, biarkan. Di dalam <div>, ganti komentar TODO dengan:
<button id="open" @click="showModal = true">Buka</button>.<Teleport to="body"> berisi <div v-if="showModal" id="modal">, yang berisi <p>Ini modal!</p> dan <button @click="showModal = false">Tutup</button>.Teleport memindahkan DOM modalnya ke <body>, di luar <div> komponennya, seperti modal sungguhan.
Yang dicek:
#open, dan sebelum diklik #modal belum terlihat.#open diklik, #modal ada langsung di dalam <body> dan memuat Ini modal!.#modal diklik, #modal gak terlihat lagi.
