Latihan 2 dari materi Props di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Starter-nya sudah punya produk (dua objek: Buku seharga Rp50.000 dan Pensil seharga Rp5.000), <ul id="produk">, dan child ProdukItem dengan template <li>{{ nama }} - {{ harga }}</li>. Render satu ProdukItem per produk:
ProdukItem, tambahkan opsi props: { nama: String, harga: String }.<ul id="produk">, ganti komentar TODO dengan <component :is="ProdukItem" v-for="p in produk" :key="p.nama" :nama="p.nama" :harga="p.harga" />.Yang dicek:
<ul id="produk"> dengan minimal 2 <li>, berisi Buku - Rp50.000 dan Pensil - Rp5.000.v-for, dan gak ada <li> yang diawali teks yang diketik langsung.ProdukItem menyatakan props berisi nama dan harga, dipasang dengan <component :is="ProdukItem">, dan parent mengirim :nama= dan :harga=.
