Baik, sekarang kita masuk ke bagian yang bikin aplikasi Vue terasa “hidup”: Directive & Event Handling.

Kalau sebelumnya kita hanya menampilkan data, di sini kita mulai mengatur kapan sesuatu muncul dan bagaimana aplikasi merespons aksi user. Ini adalah fondasi dari interaktivitas di Vue.

Apa yang Akan Dipelajari?

Di sesi ini, kita akan fokus ke hal-hal yang paling sering dipakai:

• Menampilkan elemen berdasarkan kondisi
• Menampilkan data dalam bentuk list
• Menangani interaksi user seperti klik dan input

Kalau ini sudah dikuasai, kamu sudah bisa bikin UI yang dinamis.

v-if: Tampil atau Tidak?

Kadang kita ingin menampilkan elemen hanya dalam kondisi tertentu. Nah, di sinilah v-if digunakan.

<p v-if="isLoggedIn">Selamat datang!</p>
<p v-else>Silakan login dulu</p>

<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(true)
</script>

Cara kerjanya:

• Jika isLoggedIn = true → tampil pesan pertama
• Jika false → tampil alternatifnya

Ini sering dipakai untuk:

• Status login
• Role user
• Validasi sederhana

v-for: Menampilkan Data Berulang

Kalau kamu punya data berbentuk array, dan ingin ditampilkan satu per satu, gunakan v-for.

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

<script setup>
import { ref } from 'vue'
const daftarNama = ref(['Andi', 'Budi', 'Citra'])
</script>

Penting:

• v-for akan looping data
• :key wajib untuk performa (biar Vue tracking dengan benar)

@click: Respon Aksi Klik

Untuk menangani klik, Vue menyediakan shorthand @click.

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

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

const jumlah = ref(0)

function tambah() {
  jumlah.value++
}
</script>

Setiap tombol diklik → fungsi dipanggil → data berubah → tampilan ikut update.

@input: Kontrol Input Secara Manual

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

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

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

const nama = ref('')

function ubahNama(e) {
  nama.value = e.target.value
}
</script>

Bedanya dengan v-model:

• v-model → otomatis
• @input → lebih fleksibel (bisa diproses dulu sebelum disimpan)

Mini Project: Dashboard Interaktif

Sekarang kita gabungkan semuanya dalam satu halaman.

Buat file: resources/js/Pages/Basic2.vue

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

    <!-- Conditional -->
    <p v-if="isAdmin" class="text-green-600">Role: Admin</p>
    <p v-else class="text-red-600">Role: User</p>

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

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

Tambahkan route di Laravel:

use Inertia\Inertia;

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

Akses di browser:

http://localhost:8000/basic-2

Apa yang Terjadi di Halaman Ini?

• Input langsung update teks (real-time)
• Status admin berubah sesuai kondisi
• Daftar tugas bisa bertambah tanpa reload
• Semua perubahan langsung terlihat tanpa refresh

Inilah kekuatan Vue: reaktif dan instan.

Ringkasan

Hari ini kita sudah pegang 4 senjata utama:

1. v-if → kontrol tampilan berdasarkan kondisi
2. v-for → render data dalam bentuk list
3. @click → tangani aksi klik
4. @input → kontrol input manual

Kesimpulan

Kalau sebelumnya kita baru “menampilkan data”, sekarang kita sudah mulai berinteraksi dengan user.

Dan percaya atau tidak, hampir semua fitur UI yang kompleks—filter data, form dinamis, bahkan dashboard real-time—dibangun dari konsep yang barusan kita pelajari ini.

Di sesi berikutnya, kita akan naik level: masuk ke Component & Props, supaya kode kita makin modular dan reusable