Latihan 2 dari materi Teleport & KeepAlive di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya activeTab (mulai 1), tombol #tab1 (Makanan) dan #tab2 (Minuman), dan dua child: TabMakanan, berisi kolom <input id="catatan"> dengan state catatan miliknya sendiri, dan TabMinuman, berisi <p id="minuman">Es Teh Rp5000</p>. Semuanya tetap. Di bawah kedua tombol, ganti komentar TODO dengan:
<KeepAlive> sebagai pembungkus.<component :is="activeTab === 1 ? TabMakanan : TabMinuman" />.Tanpa <KeepAlive>, TabMakanan di-unmount saat ditinggalkan, dan catatannya hilang saat kamu kembali.
Yang dicek:
#catatan saat halaman tampil.tanpa sayur di #catatan, lalu klik #tab2: #minuman berbunyi persis Es Teh Rp5000.#tab1: #catatan masih berisi tanpa sayur.<KeepAlive>.
