Latihan 2: Composables — Vue

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

Starter-nya cuma komentar TODO dan <div> kosong di template. Buat saklar ON/OFF lewat composable:

Di script, tulis function useToggle(initial = false) { ... }. Di dalamnya: const isOn = ref(initial), const toggle = () => isOn.value = !isOn.value, lalu return { isOn, toggle }.
Pakai dengan nilai awal true: const { isOn, toggle } = useToggle(true).
Di dalam <div>, tampilkan <span id="status">{{ isOn ? "ON" : "OFF" }}</span> dan <button id="btn" @click="toggle">Toggle</button>.

Yang dicek, masing-masing dari halaman baru:

Sebelum diklik, #status berisi ON.
Kodemu punya function useToggle atau useToggle =, dan komponennya memakainya: = useToggle(.
Setelah #btn diklik sekali, #status berisi OFF.
Setelah #btn diklik dua kali, #status kembali ON.

Hint

Saklarnya cuma butuh satu nilai true/false dan satu fungsi pembalik, dibungkus dalam composable useToggle.
Di dalam useToggle: isOn = ref(initial) dan toggle yang mengisi isOn.value dengan kebalikannya, lalu return { isOn, toggle }. Panggil useToggle(true) supaya mulai dari ON.
function useToggle(initial = false) { const isOn = ref(initial); const toggle = () => isOn.value = !isOn.value; return { isOn, toggle } } const { isOn, toggle } = useToggle(true)

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…