Latihan 2 dari materi Custom Directives di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Directive v-rupiah menulis angka sebagai rupiah. Starter-nya sudah punya child Kasir dengan total (mulai 15000), <span id="total"></span>, tombol #tambah yang menambah 15000, dan opsi directives: { rupiah: vRupiah }. Isi bagian yang masih kosong:
vRupiah, tulis hook mounted(el, binding) yang mengisi el.textContent dengan "Rp" + binding.value.toLocaleString("id-ID").updated(el, binding) dengan isi yang sama, supaya teksnya ikut berubah saat total berubah.Kasir, tambahkan v-rupiah="total" di <span id="total">.Directive yang ditulis sebagai satu fungsi, (el, binding) => { ... }, menjalankan isinya di mounted dan updated sekaligus, jadi juga lolos.
Yang dicek:
#total berbunyi persis Rp15.000.#tambah diklik, #total berbunyi persis Rp30.000.<span id="total"> memakai v-rupiah="total", dan angkanya dibaca dari binding.value.
