Latihan 1: Composables — Vue

Latihan 1 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. Pindahkan logika counter ke composable:

Di script, tulis function useCounter(initial = 0) { ... }. Di dalamnya: const count = ref(initial), const increment = () => count.value++, const reset = () => count.value = initial, lalu return { count, increment, reset }.
Di bawahnya, pakai composable itu: const { count, increment, reset } = useCounter(0).
Di dalam <div>, tampilkan <span id="count">{{ count }}</span>, <button id="inc" @click="increment">+1</button>, dan <button id="reset" @click="reset">Reset</button>.

Yang dicek, masing-masing dari halaman baru:

Sebelum diklik, #count berisi 0.
Kodemu punya function useCounter atau useCounter =, dan komponennya memakainya: = useCounter(.
Setelah #inc diklik sekali, #count berisi 1.
Setelah #inc diklik dua kali, #count berisi 2.
Setelah dua klik itu, #reset diklik dan #count kembali 0.

Hint

Composable adalah fungsi useCounter yang membuat ref, menulis fungsi pengubahnya, lalu mengembalikan semuanya. Komponen tinggal memanggilnya.
Di dalam useCounter: count = ref(initial), increment menambah count.value satu, reset mengisi count.value = initial, lalu return { count, increment, reset }. Di luar fungsi: bongkar hasil useCounter(0).
function useCounter(initial = 0) { const count = ref(initial); const increment = () => count.value++; const reset = () => count.value = initial; return { count, increment, reset } } const { count, increment, reset } = useCounter(0)

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…