Vue

Forms & v-model

Penjelasan

v-model adalah shortcut Vue untuk two-way binding pada input form — otomatis menyinkronkan nilai input dengan ref() terkait DUA ARAH: perubahan di input mengupdate ref, dan perubahan ref (dari kode lain) langsung terpantul balik ke input. Ini setara pola value+onChange manual di React, tapi jauh lebih ringkas.

Contoh Konsep

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

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

<template>
    <input v-model="nama" type="text">
    <p>Halo, {{ nama }}!</p>
</template>

Praktikum

Buat ref() email (string kosong) dan umur (number, awalnya 0). Bikin input untuk keduanya lewat v-model, lalu tampilkan ringkasan "Email: {{ email }}, Umur: {{ umur }}" di bawah kedua input.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Untuk input type="number" dengan v-model, Vue OTOMATIS mengubah nilainya jadi tipe number asli (bukan string seperti React) — cukup tulis v-model="umur" biasa, tidak perlu konversi Number() manual seperti di React.

← Kembali List Rendering: v-for Lanjutkan → Watchers: watch() dan watchEffect()