Latihan 1: Form & v-model — Vue
Latihan 1 dari materi Form & v-model di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya const nama = ref("") dan sebuah <div>, biarkan. Di dalam <div>, ganti komentar TODO dengan:
- Kolom isian
<input id="nama" v-model="nama" />.
- Di bawahnya, paragraf
<p id="preview">{{ nama }}</p>.
Pakai v-model biasa, tanpa .lazy, supaya paragrafnya berubah di setiap ketikan.
Yang dicek:
- Ada
#nama dan #preview.
- Kodenya memakai
v-model.
- Sesudah
Sinta diketik di #nama, #preview berisi persis Sinta.
Hint
- Ikatan dua arah berarti kolomnya membaca dan menulis ref yang sama, jadi gak perlu tombol atau handler sendiri.
- Kolom ber-id nama diberi v-model="nama", lalu paragraf ber-id preview menampilkan {{ nama }}.
- <input id="nama" v-model="nama" /> <p id="preview">{{ nama }}</p>
