Latihan 1: Form Lanjutan — Vue

Latihan 1 dari materi Form Lanjutan di Vue — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah punya name, error, success, dan fungsi handleSubmit yang lengkap, biarkan. Di template, ganti komentar TODO dengan:

Pasang @submit.prevent di <form>, bukan @click di tombolnya: menekan Kirim mengirim form-nya, dan .prevent menjaga halamannya gak di-reload.

Yang dicek:

Ada <form> dan #name, dan kodenya memakai v-model, ref (atau reactive), dan @submit.prevent.
Dikirim dengan isian kosong: #error berbunyi persis Nama wajib diisi.
Mengetik Budi saja belum memunculkan #success.
Dikirim dengan Budi: #success berbunyi persis Berhasil! dan #error hilang.
Mengosongkan isian tanpa mengirim: #success tetap Berhasil!.
Dikirim lagi dengan isian kosong: #success hilang.

Hint

Pemeriksaannya sudah ada di handleSubmit. Tugasmu menyambungkan form ke fungsi itu, lalu menampilkan error dan success hanya saat isinya ada.
Form diberi @submit.prevent="handleSubmit". Di dalamnya: input ber-id name dengan v-model="name", span error dan span success masing-masing dengan v-if, dan tombol bertipe submit.
<form @submit.prevent="handleSubmit"> <input id="name" v-model="name" /> <span v-if="error" id="error">{{ error }}</span> <span v-if="success" id="success">Berhasil!</span> <button type="submit">Kirim</button> </form>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…