Binding Data Svelte — Svelte

bind: directive memberikan two-way binding di Svelte. bind:value let nama = "" Halo, {nama}! Binding Lainnya let checked = false let selected = "" let teks =…

Binding artinya mengikat isi elemen form dengan sebuah variabel, dua arah. Di Svelte caranya pakai directive bind:. Bayangin papan pesanan dari kapur di Warung Bu Sri. Pembeli menulis namanya di papan, dan kasir membaca papan yang sama. Kalau kasir menghapus lalu menulis ulang, pembeli juga melihat tulisan barunya. Gak ada salinan, cuma satu papan. bind:value membuat kolom isian dan variabelnya jadi satu papan seperti itu.

🧪 Tebakan cepat: kolom jumlah porsi ditulis <input bind:value={porsi} />, tanpa type="number". Pembeli mengetik 2, lalu menekan tombol yang menjalankan porsi += 1. Kolomnya sekarang berisi 3 atau 21? Jawabannya ada di bagian "Angka: type="number"".

bind:value: kolom dan variabel selalu sama

Ini contoh dari latihan pertama:

<script>
  let nama = ""
</script>

<input bind:value={nama} placeholder="Ketik nama..." />
<p>Halo, {nama}!</p>
Kejadian Isi kolom nama Tampil
Awal (kosong) "" Halo, !
Ketik Sinta Sinta "Sinta" Halo, Sinta!
Kode menjalankan nama = "Budi" Budi "Budi" Halo, Budi!

Angka: type="number"

Isi kolom teks selalu string, walaupun yang diketik angka:

Kolom Diketik porsi Setelah porsi += 1
<input bind:value={porsi} /> 2 "2" (string) "21"
<input type="number" bind:value={porsi} /> 2 2 (number) 3

Kolom teks menghasilkan "21". Itu jawaban tebakannya. "2" + 1 di JavaScript menyambung teks, bukan menjumlah. Dengan type="number" (atau type="range"), Svelte mengubah isinya jadi number sebelum disimpan, jadi porsi += 1 menghasilkan 3. Kalau kolom angkanya dikosongkan, Svelte 4 mengisi porsi dengan null.

Di form pesanan warung, totalnya bisa dihitung langsung dari kolom itu:

<input type="number" bind:value={porsi} min="1" />
<p>Total: Rp {5000 * porsi}</p>

Kotak centang: bind:checked

Kotak centang menyimpan keadaannya di checked, true atau false. Ini latihan kedua:

<script>
  let setuju = false
</script>

<label>
  <input type="checkbox" bind:checked={setuju} />
  Saya setuju
</label>

{#if setuju}
  <p>Anda setuju</p>
{:else}
  <p>Belum setuju</p>
{/if}
Kejadian setuju Tampil
Awal false Belum setuju
Klik kotaknya true Anda setuju
Klik lagi false Belum setuju

Pilihan: bind:group

Untuk sekelompok radio atau kotak centang, pakai bind:group dengan variabel yang sama di setiap pilihan:

<script>
  let menu = "Nasi Goreng"
  let tambahan = []
</script>

<label><input type="radio" bind:group={menu} value="Nasi Goreng" /> Nasi Goreng</label>
<label><input type="radio" bind:group={menu} value="Mie Ayam" /> Mie Ayam</label>

<label><input type="checkbox" bind:group={tambahan} value="Telur" /> Telur</label>
<label><input type="checkbox" bind:group={tambahan} value="Kerupuk" /> Kerupuk</label>

<p>{menu} + {tambahan.join(", ")}</p>

select dan textarea

<select bind:value={meja}> menyimpan value dari <option> yang dipilih. Kalau ditulis <option value={2}>Meja 2</option>, meja berisi number 2, bukan string. <textarea bind:value={catatan}> bekerja seperti kolom teks.

📌 bind:this: pegangan ke elemennya

Kadang kamu butuh elemen DOM-nya sendiri, misalnya untuk memindahkan kursor ke kolom nama:

<script>
  let kolomNama

  function isiNama() {
    kolomNama.focus()
  }
</script>

<input bind:this={kolomNama} />
<button on:click={isiNama}>Isi nama</button>

kolomNama masih undefined saat <script> pertama kali jalan, karena elemennya belum dibuat. Pakai di dalam handler, atau di onMount dari pelajaran Lifecycle.

Svelte 5

bind:value, bind:checked, bind:group, dan bind:this ditulis sama di Svelte 5. Bedanya, variabel yang diikat harus $state: let nama = $state(""). Di komponen runes, bind:value={nama} dengan let nama = "" biasa membuat compiler memberi peringatan `nama` is updated, but is not declared with `$state(...)`, dan paragrafnya gak ikut berubah.

⚠️ Jebakan yang sering ketemu

TL;DR: bind:value={nama} mengikat kolom isian dan variabel dua arah: mengetik mengubah variabel, dan mengubah variabel mengubah isi kolom. Tanpa bind:, value={nama} cuma satu arah. Kolom teks selalu menghasilkan string ("2" + 1 jadi "21"), sedangkan type="number" menghasilkan number. Kotak centang tunggal memakai bind:checked (true/false), sekelompok radio memakai bind:group dengan satu nilai, dan sekelompok kotak centang memakai bind:group dengan array. bind:this memberi pegangan ke elemen DOM-nya setelah dibuat. Di Svelte 5 sintaksnya sama, dengan variabel $state. Latihannya: <input bind:value={nama} /> dengan <p>Halo, {nama}!</p> jadi Halo, Sinta!, dan kotak bind:checked={setuju} yang membalik Belum setuju jadi Anda setuju.

Yang akan kamu pelajari