Baik teman-teman, pada pertemuan kali ini kita akan mulai masuk ke pembahasan dasar Vue.js, khususnya yang sering kita gunakan dalam proyek Laravel + Inertia + Vue. Materi ini sangat penting karena menjadi fondasi sebelum kita melangkah ke fitur-fitur yang lebih kompleks seperti form dinamis, validasi, dan komunikasi dengan backend.

Setelah materi ini, teman-teman diharapkan bisa memahami:

• Cara mendeklarasikan data di dalam komponen Vue menggunakan data().
• Bagaimana menggunakan v-model untuk membuat input yang reaktif.
• Bagaimana menampilkan data dengan sintaks {{ variable }} atau disebut juga interpolasi.

data() — Menyimpan dan Mengelola Data Reaktif

Di dalam Vue, setiap komponen punya tempat untuk menyimpan data. Cara mendeklarasikan data adalah dengan membuat function data() yang akan me-return sebuah objek.

Contoh sederhana:

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

const nama = ref('Kurnia Andi')
</script>

<template>
  <p>Nama saya adalah {{ nama }}</p>
</template>

Pada contoh diatas, Kita menggunakan ref() karena kita menggunakan Composition API, yang menjadi standar di Vue 3. Nilai nama sekarang reaktif. Artinya, kalau nilainya berubah, semua tampilan yang bergantung padanya akan otomatis ikut berubah.

{{ variable }} — Interpolasi Data

Dalam template Vue, kita bisa menampilkan data menggunakan kurung kurawal ganda {{ }}. Ini disebut interpolasi.

Contoh sederhana:

<p>Halo, {{ nama }}</p>

Jika nilai dalam nama adalah Andi, maka di browser akan tampil: “Halo, Andi”

v-model — Binding Data ke Input

Sekarang bayangkan kita punya form input, misalnya input teks untuk nama. Kalau kita ingin input ini terhubung dengan data nama, maka kita gunakan v-model.

Contoh Sederhana:

<input type="text" v-model="nama" placeholder="Masukkan nama">
<p>Nama yang diketik: {{ nama }}</p>

v-model akan mengikat data dua arah. Artinya: ketika pengguna mengetik di input, data nama langsung berubah. Dan karena kita punya interpolasi di bawahnya ({{ nama }}), tampilan juga langsung berubah sesuai input.

Studi Kasus Sederhana

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

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

const nama = ref('')
</script>

<template>
  <div class="p-4">
    <h1 class="text-xl font-bold mb-2">Form Input Nama</h1>
    <input v-model="nama" type="text" class="border px-2 py-1 rounded" placeholder="Masukkan nama Anda">
    <p class="mt-2">Halo, {{ nama }}!</p>
  </div>
</template>

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

use Inertia\Inertia;

Route::get('/hello', function () {
    return Inertia::render('Hello');
});

Sekarang, didalam web browser ketika kita akses url_laravel/hello, akan muncul form input nama. Ketika kita ketik, secara otomatis teks di bawahnya akan ikut berubah.

Kesimpulan

Kali ini kita belajar tiga hal penting:

1. data() atau dalam Vue 3: ref() digunakan untuk menyimpan data reaktif.
2. {{ variable }} untuk menampilkan data ke halaman.
3. v-model untuk mengikat data ke input form.

Hal-hal ini terlihat sepele, tapi inilah pondasi dari interaktivitas di Vue. Kita akan terus membangun di atas konsep ini dalam pertemuan selanjutnya.