Baik teman-teman, melanjutkan materi sebelumnya, hari ini kita akan masuk ke topik yang sangat sering dipakai dalam membangun antarmuka pengguna dengan Vue, yaitu Directive & Events.

Sederhananya, directive itu seperti "perintah khusus" yang kita tulis langsung di template untuk memberi tahu Vue bagaimana cara memperlakukan elemen HTML tertentu. Sedangkan event adalah cara kita merespons aksi pengguna, seperti klik tombol atau mengetik di input.

Outcomes

Setelah sesi ini, teman-teman diharapkan:

• Memahami dan menggunakan directive v-if dan v-for
• Menangani event dasar seperti @click dan @input
• Membangun interaksi dinamis berdasarkan kondisi dan aksi pengguna

v-if Menampilkan Berdasarkan Kondisi

Directive v-if digunakan kalau kita ingin menampilkan atau menyembunyikan elemen berdasarkan suatu kondisi.

Contoh Sederhana:

<p v-if="isLoggedIn">Selamat datang, Andi!</p>
<p v-else>Silakan login terlebih dahulu</p>

const isLoggedIn = ref(true)

Ketika isLoggedIn bernilai true, maka hanya paragraf pertama yang muncul. Sebaliknya, jika bernilai false, maka yang muncul adalah paragraf kedua.

v-for Melakukan Perulangan

Nah, kalau teman-teman ingin menampilkan list data (misalnya daftar nama), kita bisa gunakan v-for.

Contoh Sederhana:

<ul>
  <li v-for="(nama, index) in daftarNama" :key="index">{{ nama }}</li>
</ul>

const daftarNama = ref(['Andi', 'Budi', 'Citra'])

v-forakan mengulang setiap item didaftarNama, sedangkan :key sangat disarankan supaya Vue bisa melacak elemen dengan efisien

@click Menangani Klik

Vue menyediakan cara cepat untuk merespons event dengan @eventname. Untuk klik tombol, kita cukup tulis @click.

Contoh Sederhana:

<button @click="tambah">Tambah</button>
<p>Jumlah: {{ jumlah }}</p>

const jumlah = ref(0)

function tambah() {
  jumlah.value++
}

Setiap kali tombol tambah diklik, maka fungsi tambah() dipanggil, dan nilai jumlah bertambah.

@input Merespons Input Pengguna

Selain menggunakan v-model, kita juga bisa menangani event input secara manual dengan @input.

Contoh Sederhana:

<input type="text" @input="ubahNama">
<p>Nama: {{ nama }}</p>

const nama = ref('')

function ubahNama(e) {
  nama.value = e.target.value
}

Ini sama saja fungsinya seperti v-model, tapi lebih fleksibel kalau kita mau memproses input terlebih dahulu.

Studi Kasus Sederhana

Silakan teman-teman tambahkan sebuah file baru dengan nama Basic2.vue di dalam resources/js/Pages, kemudian masukkan baris kode berikut ini:

<script setup>
import { ref } from 'vue'

const nama = ref('')
const isAdmin = ref(true)
const daftarTugas = ref(['Belajar Vue', 'Push ke Git', 'Review PR'])

function ubahNama(e) {
  nama.value = e.target.value
}

function tambahTugas() {
  daftarTugas.value.push(`Tugas Baru ${daftarTugas.value.length + 1}`)
}
</script>

<template>
  <div class="p-4">
    <h1 class="text-xl font-bold mb-2">Dashboard</h1>

    <input type="text" @input="ubahNama" placeholder="Masukkan nama" class="border px-2 py-1 rounded">
    <p>Halo, {{ nama }}</p>

    <p v-if="isAdmin" class="text-green-600">Anda login sebagai Admin</p>
    <p v-else class="text-red-600">Anda bukan Admin</p>

    <ul>
      <li v-for="(tugas, i) in daftarTugas" :key="i">{{ tugas }}</li>
    </ul>

    <button @click="tambahTugas" class="mt-2 bg-blue-500 text-white px-3 py-1 rounded">
      Tambah Tugas
    </button>
  </div>
</template>

Kemudian didalam laravel, tepatnya di folder routes/web.php tambahkan rute baru berikut ini:

Route::get('/basic-2', function () {
    return Inertia::render('Basic2');
});

Maka teman teman bisa mencoba halaman yang baru saja dibuat melalui url_laravel/basic-2, Halaman ini menampilkan input nama yang langsung merespons perubahan secara real-time, menampilkan status apakah pengguna adalah admin, serta daftar tugas yang bisa terus ditambah dengan sekali klik. Data seperti nama, status admin, dan daftar tugas dikelola secara reaktif menggunakan Vue 3 Composition API, sehingga setiap perubahan langsung tercermin di tampilan tanpa perlu refresh halaman.

Kesimpulan

Hari ini kita sudah belajar empat hal penting:

1. v-if untuk menampilkan elemen secara kondisional
2. v-for untuk melakukan perulangan pada array
3. @click untuk menangani event klik
4. @input untuk menangani input manual

Empat hal ini adalah dasar dari hampir semua interaksi antarmuka di Vue. Di pertemuan berikutnya kita akan mulai membahas Komponen & Props Komponen global vs lokal.