WebTech Interaktif

Vue · Bab 2

Template, Directive, dan Form

Mengikat atribut dan class dengan v-bind, memilih v-if atau v-show, menampilkan daftar dengan v-for dan key unik, menangani event dengan modifier, membangun form dengan v-model dan validasi yang aksesibel, serta memahami bahaya v-html.

Bab 1 menampilkan state dengan {{ }}. Bab ini memperkenalkan directive: atribut khusus berawalan v- yang membuat template bereaksi terhadap state. Dengan directive kamu bisa menyembunyikan elemen, mengulang daftar, mendengarkan klik, dan mengikat input form. Di akhir bab kamu mengerjakan lab pertama.

2.1 v-bind dan :class

v-bind:atribut="ekspresi" mengisi atribut dari state. Karena sangat sering dipakai, ada singkatannya: :atribut. Isi tanda kutip adalah ekspresi JavaScript, bukan teks.

:class menerima objek { namaClass: kondisi }: class dipasang bila kondisinya benar. Class statis (class="kartu") tetap ada dan digabung.

Vue (HTML + JavaScript)

🧪 Coba ubah: arahkan kursor ke kartu untuk melihat title dari :title. Klik “Pinjam semua” dan lihat class habis terpasang.

2.2 v-if atau v-show

Keduanya menampilkan elemen berdasarkan kondisi, dengan cara berbeda:

v-ifv-show
Kondisi salahelemen tidak dibuat di DOMelemen ada, diberi display: none
Pasanganbisa diikuti v-else-if, v-elsetidak punya pasangan
Cocok untukkondisi yang jarang berubahelemen yang sering dibuka-tutup
Vue (HTML + JavaScript)

🧪 Coba ubah: ganti v-show menjadi v-if lalu jalankan. Tampilannya sama; bedanya di DOM: dengan v-if, paragraf rak tidak ada sama sekali selama tertutup, dengan v-show paragraf itu ada tetapi disembunyikan.

2.3 v-for dan :key

v-for="b in daftarBuku" mengulang elemen untuk setiap item. Setiap elemen hasil v-for wajib diberi :key yang unik dan tetap untuk item itu, biasanya id dari data.

Mengapa bukan indeks ((b, i) in daftarBuku lalu :key="i")? Saat daftar diurutkan atau disaring, indeks berpindah ke item lain. Vue lalu memakai ulang elemen yang salah, dan isi input atau fokus di dalamnya ikut “melompat” ke buku lain.

Vue (HTML + JavaScript)

🧪 Coba ubah: ketik catatan di baris pertama, klik Urutkan, dan lihat catatan ikut bukunya. Lalu ganti :key="b.id" menjadi indeks dengan v-for="(b, i) in daftarBuku" :key="i", ulangi, dan bandingkan.

2.4 Event dan Modifier

v-on:click="...", disingkat @click="...", menjalankan ekspresi atau fungsi saat event terjadi. Modifier ditulis setelah titik:

  • @keydown.enter="cari": hanya saat tombol Enter.
  • @submit.prevent="simpan": memanggil event.preventDefault() agar browser tidak memuat ulang halaman saat form dikirim.
  • @click.stop: menghentikan event naik ke elemen induk.

Form selalu ditangani lewat @submit.prevent pada <form>, bukan @click pada tombol: dengan begitu tombol Enter di input juga mengirim form, dan pembaca layar mengenali formnya.

Preview playground dan lab berjalan di sandbox yang memblokir pengiriman form ke mana pun. Runner menerbitkan event submit sendiri, jadi @submit.prevent bekerja sama seperti di browser biasa.

2.5 Form Anggota Baru dengan v-model

v-model mengikat input dua arah: mengetik mengubah state, mengubah state mengubah isi input. Dua modifier yang sering dipakai:

  • v-model.trim: membuang spasi di awal dan akhir.
  • v-model.number: mengubah isian menjadi angka.

Validasi di klien ditulis sebagai computed yang menghasilkan pesan galat. Agar pesan itu sampai ke pengguna pembaca layar:

  • aria-invalid="true" pada input yang salah (diikat dengan :aria-invalid);
  • aria-describedby="id-pesan" menghubungkan input dengan elemen pesannya;
  • elemen pesan diberi aria-live="polite" agar dibacakan saat berubah.
Vue (HTML + JavaScript)

🧪 Coba ubah: ketik ” Sa ” (dengan spasi) lalu lihat pesan galatnya: .trim membuang spasi sehingga panjangnya 2. Ketik nama yang benar dan tekan Enter di kotak umur.

2.6 Keamanan: v-html

{{ }} selalu meng-escape HTML (bab 1). Directive v-html="isi" justru memasukkan teks sebagai HTML, sehingga tag dan atribut di dalamnya dijalankan browser. Bila isinya berasal dari pengguna atau server, penyerang bisa menyisipkan <img src=x onerror="..."> yang menjalankan skrip di halamanmu. Serangan ini disebut XSS (cross-site scripting).

Aturannya sederhana: jangan pernah memakai v-html untuk data dari server atau pengguna. Termasuk yang tampak tidak berbahaya: respons paginasi Laravel (bab 4) berisi label tombol seperti &laquo; Previous dan Next &raquo;. Godaannya adalah menampilkan label itu dengan v-html agar entitasnya menjadi panah. Jangan. Bangun tombol halaman sendiri dari angka current_page dan last_page, dengan teks yang kamu tulis sendiri.

Vue (HTML + JavaScript)

🧪 Coba ubah: jalankan dan buka tab Console. Baris dari onerror membuktikan kode di dalam data ikut dijalankan. Hapus baris v-html dan jalankan lagi.

Rangkuman

  • :atribut (singkatan v-bind) mengisi atribut dari state; :class="{ nama: kondisi }" memasang class bersyarat.
  • v-if membuat atau membuang elemen; v-show hanya menyembunyikan.
  • v-for selalu dengan :key unik dari data, bukan indeks.
  • @event dengan modifier; form ditangani @submit.prevent.
  • v-model dengan .trim dan .number; validasi dengan computed, diumumkan lewat aria-invalid, aria-describedby, dan aria-live.
  • v-html membuka celah XSS; jangan dipakai untuk data luar.

Berikutnya: Lab bab 2 membangun katalog dan form usulan Smart Retail dengan semua directive ini.