Kali ini kita akan belajar tentang input binding di Vue JS. Secara sederhana input binding adalah mengaitkan input dengan state. Pada contoh sebelumnya kita sudah mencoba mengubah state menggunakan nilai dari input. Ternyata, ada cara yang lebih sederhana untuk mengubah nilai state. Mari kita lihat contoh sebelumnya.
<script setup lang="ts">
import {ref} from "vue";
const name = ref("");
function save() {
const fistNameInput = document.getElementById("firstName") as HTMLInputElement;
const lastNameInput = document.getElementById("lastName") as HTMLInputElement;
name.value = fistNameInput.value +" "+ lastNameInput.value;
}
</script>
<template>
First Name: <input type="text" id="firstName"/><br>
Last Name: <input type="text" id="lastName"><br>
<button @click="save">Save</button><br>
Your Name = {{name}}
</template>
<style scoped>
</style>Dengan contoh di atas, kita akan mendapatkan hasil sebagai berikut.
Menggunakan contoh di atas, jika kita mengisi First Name dan Last Name kemudian kita klik tombol Save, maka Your Name akan menampilkan gabungan First Name dan Last Name. Untuk mendapatkan value pada input kita harus menggunakan document.getElementById(“firstName”) as HTMLInputElement. Namun ada cara yang lebih yang telah disediakan oleh Vue.
Cara Menggunakan Input Binding
Cara menggunakan input binding di vue adalah menggunakan directive bernama v-model. Directive v-model akan melakukan sinkronisasi antara state dengan data yang ada pada input. Directive ini sebenarnya hanya berlaku secara terbatas, yaitu untuk elemen <input>, <select> dan <textarea> saja. Ada beberapa perbedaan melakukan binding untuk elemen-elemen tersebut, yaitu:
- <input type=”text”> melakukan binding attribute value menggunakan event @input
- <input type=”checkbox/radio”> melakukan binding attribute checked menggunakan event @change
- <select> melakukan binding attribute value menggunakan event @change
- <textarea> melakukan binding text yang ada di dalam textarea menggunakan @input
Untuk lebih jelasnya mari kita buat contoh seperti berikut ini.
<script setup lang="ts">
import {reactive} from "vue";
class Contact {
nama: string = "";
email: string = "";
age: number = 0;
tipe: string = "";
complain: boolean = false;
message: string = "";
}
const contact = reactive(new Contact());
</script>
<template>
<h1>Contact Us</h1>
<form>
<div>
<label for="name"> Name:
<input type="text" id="nama" v-model="contact.nama"><br>
</label>
</div>
<div>
<label for="name"> Email:
<input type="text" id="email" v-model="contact.email">
</label>
</div>
<div>
<label for="name"> Age:
<input type="text" id="age" v-model="contact.age">
</label>
</div>
<div>
<label for="tipe"> Type:
<select id="tipe" v-model="contact.tipe">
<option value="Dosen">Dosen</option>
<option value="Mahasiswa">Mahasiswa</option>
</select>
</label>
</div>
<div>
<label for="complain"> Complain:
<input type="checkbox" id="complain" v-model="contact.complain">
</label>
</div>
<div>
<label for="message"> Message:
<textarea id="message" v-model="contact.message"></textarea>
</label>
</div>
</form>
<h2>Preview</h2>
Name: {{contact.nama}}<br>
Email: {{contact.email}}<br>
Age: {{contact.age}}<br>
Type: {{contact.tipe}}<br>
Complain: {{contact.complain}}<br>
Message: {{contact.message}}
</template>
<style scoped>
</style>Contoh di atas akan menghasilkan tampilan seperti berikut ini.
Dengan tampilan di atas, item pada preview akan secara otomatis diupdate ketika kita mengisi field yang ada di atasnya.
Model Modifier
Jika kita perhatikan lagi, pada contoh di atas terdapat input Age dengan type number. Untuk memastikan input yang dimasukkan benar number, kita bisa menggunakan yang namanya model modifier number. Caranya adalah dengan menambahkan .number setelah directive v-model. Perhatikan contoh berikut.
<div>
<label for="name"> Age:
<input type="text" id="age" v-model.number="contact.age">
</label>
</div>Selain menggunakan model modifier number kita juga bisa menggunakan model modifier lazy. Model modifier ini berguna untuk mengubah cara melakukan binding. Misalnya, jika kita menambahkan lazy ke textarea maka dia akan melakukan binding saat terjadi event change. Perhatikan contoh berikut ini.
<div>
<label for="message"> Message:
<textarea id="message" v-model.lazy="contact.message"></textarea>
</label>
</div>Pada contoh di atas kita tambahkan lazy pada textarea, dengan begitu maka binding ke message akan terjadi setelah kita klik di luar text area. Tanpa lazy apapun yang kita ketika akan secara otomatis masuk ke state message. Selain lazy, sebenarnya juga ada model modifier dengan nama trim yang digunakan untuk menghapus whitespace sebelum dan sesudah string.
Nah, demikianlah sedikit penjelasan tentang penggunaan input binding di Vue JS. Menggunakan input binding akan memudahkan kita jika harus melakukan sinkronisasi antara input dengan state. Jika penjelasanku kurang lengkap, teman-teman bisa mengakses dokumentasi Vue JS. Semoga tulisan ini bermanfaat untuk kita semua.
