Latihan 1: Computed Properties — Vue

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

Kode awal sudah punya const firstName = ref("Budi") dan const lastName = ref("Santoso"), biarkan. Lengkapi:

Di script, buat fullName dengan computed yang menggabungkan keduanya dengan satu spasi di tengah: const fullName = computed(() => firstName.value + " " + lastName.value).
Di template, di bawah garis ---template---, tampilkan fullName di {{ fullName }}.

Yang dicek:

#full berisi persis Budi Santoso.
Kodenya memanggil computed(...), dan isi  adalah {{ fullName }}, bukan nama yang diketik langsung.

Hint

Nama lengkap adalah nilai turunan: dihitung dari dua ref dan ikut berubah saat salah satunya berubah, jadi dibuat dengan computed.
Getter-nya membaca firstName.value dan lastName.value, lalu merangkainya dengan satu spasi di tengah. Di template tampilkan {{ fullName }} di p dengan id full.
const fullName = computed(() => firstName.value + " " + lastName.value) lalu di bawah ---template---: {{ fullName }}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Computed Properties — Vue

Hint

Memperbarui Aplikasi