Vue: Form Handling dengan v-model

Pada artikel sebelumnya, kita telah membahas tentang Directive v-for beserta fungsinya. Pada seri ini, kita akan membahas tentang Directive v-model juga beserta fungsinya.

Directive v-model dapat membuat Data-Binding pada dua arah (Two-Way) yaitu pada Form Input dan elemen Textarea. Dengan kata lain, v-model dapat mengikat input dari pengguna dengan data model dari Vue - ketika salah satu diantaranya terdapat perubahan, maka yang lainnya juga akan memiliki perubahan. Berikut adalah struktur Syntax dari v-model:

v-model = "propertiData"


v-model dapat mensinkronkan data dan dapat diterapkan pada hampir semua elemen input Form seperti:
  • Input Text
  • Dropdown
  • Checkbox
  • Radio
  • dll...

Sekarang, mari kita lihat tampilan dari Directive v-model. Pada artikel ini, kita akan membuat beberapa Form yang terdiri dari input yang berbeda-beda:

tampilan dari Directive v-model

Form tersebut terdiri dari Input Text untuk mengambil nama pengguna, sebuah Dropdown untuk memilih sebuah subyek, sebuah Checkbox untuk verifikasi bahwasannya pengguna telah menyetujui ketentuan, Input Radio untuk menentukan pengguna memilih yaAtauTidak, dan tombol Submit.

Vue membutuhkan inisialisasi kedalam semua properti yang ada di dalam aplikasi. Jadi, disini kita perlu menginisialisasikannya agar Form yang kita buat dapat digunakan. Kita akan mengatur Instance Method submit() yang akan menampilkan Console Log dari setiap properti:
./main.js

new Vue({
    el: '#aplikasi',
    data: {
        nama: '',
        subyek: '',
        ketentuan: false,
        yaAtauTidak: 'Tidak'
    },
    methods: {
        submit() {
            console.log('nama', this.nama);
            console.log('subyek', this.subyek);
            console.log(
                'ketentuan',
                this.ketentuan
                );
            console.log('yaAtauTidak', this.yaAtauTidak);
        }
    }
});


Pada contoh kode diatas, perhatikanlah bagaimana property data di inisialisasikan dengan cara yang berbeda tergantun pada Form Input yang kita gunakan:
  1. Kita ingin bagian nama dan subyek dapat dirender dengan nilai string yang kosong.
  2. ketentuan akan terikat kedalam Checkbox. Elemen Checkbox HTML pada dasarnya memiliki nilai Boolean. Disini, kita telah meng-inisialisasikan ketentuan menjadi false karena kita berharap agar Checkbox tersebut dapat terender dalam keadaan tidak tercentang.
  3. Input Radio biasanya dikelompokkan pada setiap input dan memiliki nilai yang unik. Disini kita juga sudah meng-inisialisaskan properti yaAtauTidak yang akan digunakan pada Input Radio dengan string "Tidak".

Sekarang, kita harus membuat Template dan menggunakan Directive v-model untuk mem-Binding properti data yang telah kita buat. Kita juga harus memasang Listener kedalam tombol Submit untuk memanggil Instance Method submit() ketika tombol tersebut di klik. Berikut adalah contohnya:
./index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://unpkg.com/bulma@0.7.4/css/bulma.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>

<body>
    <div id="aplikasi">
        <div class="field">
            <label class="label">Nama</label>
            <input v-model="nama" class="input" type="text" placeholder="Input Teks" />
        </div>

        <div class="field">
            <label class="label">Subyek</label>
            <div class="select">
                <select v-model="subyek">
                    <option disabled value="">Pilih Dropdown</option>
                    <option>HTML</option>
                    <option>CSS</option>
                    <option>JavaScript</option>
                    <option>Lainnya...</option>
                </select>
            </div>
        </div>

        <div class="field">
            <label class="checkbox">
                <input v-model="ketentuan" type="checkbox" />
                Saya setuju dengan ketentuan yang berlaku
            </label>
        </div>

        <div class="field">
            <label class="radio">
                <input v-model="yaAtauTidak" type="radio" value="Ya" />
                Ya
            </label>
            <label class="radio"> 
                <input v-model="yaAtauTidak" type="radio" value="Tidak" />
                Tidak
            </label>
        </div>

        <div class="field">
            <button class="button is-info" @click="submit">
                Submit
            </button>
        </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>

</html>


Pada Template diatas, kita telah membuat file CSS lokal bernama styles.css sama seperti contoh pada seri sebelumnya, tetapi disini kita telah menambahkan CSS Framework Bulma kedalam aplikasi melalui CDN.

Info: Bulma adalah CSS Framework yang hampir sama populernya seperti Twitter Bootstrap Framework. Bulma dapat menyediakan Grid System dan beberapa Styling yang simpel.

Sekarang, mari kita uraikan masing-masing elemen yang ada pada Template diatas.

Pada setiap Keystroke yang dibuat pada Input "Nama", v-model akan mengikat nilai dari Input tersebut ke properti data nama:
./index.html:12

<div class="field">
    <label class="label">Nama</label>
    <input v-model="nama" class="input" type="text" placeholder="Input Teks" />
</div>


Pada setiap Option yang dipilih pada Drowdown "Subyek", v-model akan mengikat nilai Option yang dipilih ke dalam properti data subyek. Disini, kita telah mengatur nilainya menjadi String kosong (Nilai inisial dari properti subyek) yaitu dengan Disabled.
./index.html:17

<div class="field">
    <label class="label">Subyek</label>
    <div class="select">
        <select v-model="subyek">
            <option disabled value="">Pilih Dropdown</option>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
            <option>Lainnya...</option>
        </select>
    </div>
</div>


Input Checkbox pada dasarnya memiliki nilai Boolean yang dapat menentukan apakah Checkbox telah di cek atau belum. Kita telah meng-inisialisaikannya kedalam properti ketentuan dengan nilai false dan langsung terikat pada Input Checkbox tersebut:
./index.html:30

<div class="field">
    <label class="checkbox">
        <input v-model="ketentuan" type="checkbox" />
        Saya setuju dengan ketentuan yang berlaku
    </label>
</div>


Terakhir, karena biasanya Input Radio memiliki nilai Custom, disini kita telah menetapkan nilainya pada setiap Input Radio disamping Directive v-model:
./index.js:37

<div class="field">
    <label class="radio">
        <input v-model="yaAtauTidak" type="radio" value="Ya" />
        Ya
    </label>
    <label class="radio">
        <input v-model="yaAtauTidak" type="radio" value="Tidak" />
        Tidak
    </label>
</div>


Sekarang, kita dapat melihat aplikasinya. Jika kita mengisi semua Form dan mengklik tombol Submit serta mengecek Developer Console, kita akan melihat masing-masing nilai dari atribut data:

Hasil Kode

Lihat kode di Github | Lihat Live Demo

Berikut adalah contoh pesan yang ada di Developer Console:

Pesan Developer Console


Sangatlah penting untuk diingat bahwa ketika menggunakan Directive v-model - Directive tersebut akan membawa properti data dari Vue Instance sebagai satu-satunya sumber yang dipercaya sebagai pengganti dari atribut pada elemen HTML seperti checked atau selected.

Two-Way Data Binding pada Vue

Meskipun Directive v-model dapat membuat data binding dua arah (Two-Way), disini kita belum bisa melihat Binding tersebut pada contoh yang ada pada bagian ini. Kita dapat melihatnya dengan membuat fungsionalitas yang dapat mengubah nilai dari properti data yang digunakan pada Form.

Jika kalian memiliki pertanyaan pada bagian ini, silahkan tulis pada kolom komentar. Semoga artikel ini bermanfaat!

0 Komentar