Latihan 2 dari materi Computed Properties di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Template-nya sudah ada, biarkan: <span id="total">{{ total }}</span>. Lengkapi script di atas garis ---template---:
Simpan harga bernilai 50000 dan jumlah bernilai 3 sebagai data reaktif: const harga = ref(50000) dan const jumlah = ref(3).
Buat total sebagai computed dari keduanya: const total = computed(() => harga.value * jumlah.value). Jangan ketik angka hasilnya.
Yang dicek:
#total berisi persis 150000.
Kodenya memanggil computed(...).
Kodenya memanggil ref(...) (atau reactive(...)).
Hint
Harga dan jumlah bisa berubah, jadi disimpan di ref. Totalnya diturunkan dari keduanya, jadi dibuat dengan computed, bukan disimpan sebagai angka.
Dua ref, harga 50000 dan jumlah 3, lalu satu computed bernama total yang getter-nya mengalikan harga.value dengan jumlah.value.
const harga = ref(50000) const jumlah = ref(3) const total = computed(() => harga.value * jumlah.value)
</>{ }.css=>#idfn()
Versi baru
HyperSheets
bagian dari BelajarWeb.dev
0%
Membuka gerbang…
HyperSheets
Memperbarui Aplikasi
Versi baru tersedia. Halaman akan dimuat ulang otomatis...