Latihan 2: Form & v-model — Vue

Latihan 2 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 warna = ref("Merah") dan sebuah <div>, biarkan. Di dalam <div>, ganti komentar TODO dengan:

<select id="warna" v-model="warna"> berisi tiga opsi: <option>Merah</option>, <option>Hijau</option>, <option>Biru</option>.
Di bawahnya, <p id="pilihan">{{ warna }}</p>.

Nilai awalnya datang dari ref("Merah"), jadi gak perlu atribut selected.

Yang dicek:

Ada #warna dengan minimal 3 <option>.
Kodenya memakai v-model.
Sebelum apa pun diubah, #pilihan berisi Merah.
Sesudah dipilih Hijau, #pilihan berisi Hijau; sesudah dipilih Biru, berisi Biru.

Hint

v-model juga bekerja di select: pilihan yang diganti langsung ditulis ke ref, dan nilai awal ref menentukan opsi yang terpilih.
Select ber-id warna diberi v-model="warna" dan tiga option tanpa value, karena teksnya sendiri jadi nilainya. Paragraf ber-id pilihan menampilkan {{ warna }}.
<select id="warna" v-model="warna"><option>Merah</option><option>Hijau</option><option>Biru</option></select> <p id="pilihan">{{ warna }}</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Form & v-model — Vue

Hint

Memperbarui Aplikasi