Cara Membuat Form dengan Vue JS

Cara Membuat Form dengan Vue JS biasanya dibutuhkan untuk input data berupa text string ataupun boolean data bisa untuk kebutuhan login, registrasi, authentication dan melakukan validasi rule form di vue js kemudian menampilkan data nya di vue js selain itu mengirimkannya ke rest api melalui axios.

Di postingan tutorial ini kita akan menggunakan form registrasi yang memiliki input name, last name, nomor identitas, jenis kelmin dan alamat yang kedepannya akan digunakan menjadi form registrasi dan login authentication menggunakan JWT, tapi di tutorial ini hanya sampai mengirimkan data ke rest api tanpa ada authentication

jika kalian mengikuti tutorial sebeulnya dari cara install vue js cli dan postingan cara menggunakan vue js route link kita lanjutkan file dan folder projectnya di berja-vue

Membuat file view RegistrationView

mari kita buat file RegistrationView.vue di folder /src/views dengan file name RegistrationView.vue kemudian isi kodingannya untuk awal adalah :

<template>
    ini tempat form register
</template>

<script>
export default {

}
</script>

<style>

</style>

kodingan diatas masih awal sehingga masih banyak yang kosong dan perlu ditambahkan untuk tag form dan css.

selanjutnya kita tambahkan ke route link di file router yang berada di /src/router/index.js, tambahkan seperti kodingan berikut di bawah ini:

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  },
  {
    path: '/registration',
    name: 'registration',
    component: () => import('../views/RegistrationView.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

bagian yg di tambahkan adalah bagian di sini:

    ...
        {
            path: '/registration',
            name: 'registration',
            component: () => import('../views/RegistrationView.vue'),
        }
    ...

Penjelasan :

• kita mendefinisikan path url ke '/registration' maka isi key dan value nya di path -> path: '/registration'
• dan view file nya berada di ../views/RegistrationView.vue isikan value bagian component menggunakan arrow function javascript component: () => import('../views/RegistrationView.vue')

selanjutnya kita tambajkan juga link url di home nya yang berada di file App.vue tambahkan <router-link to="/registragirion">Register</router-link> seperti ini:

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/registragirion">Register</router-link>
  </nav>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Penjelasan :

• kita menambahkan baris kode <router-link to="/registragirion">Register</router-link> yang artisnya kita akan mengahkan ke path url registragirion ketika diklik akan diarahkan ke /registragirion, dan jangan lupa tambahkan simbol pemisah nya dengan menambahkan simbol | di bagian atas supaya rapi.

ketika sudah semuanya mari kita jalankan server development vue js di local dengan mengetikkan perintah di command atau di terminal seperti berikut:

npm run serve

• tampilan menjalankan npm run serve

• berhasil menjalankan local serve

• jika berhasil maka buka dengan url http://localhost:8080 di browser seperti berikut:

• dan tampilan awal view template dengan url http://localhost:8080/registration di browser seperti berikut:

Menambahkan Form di Vue js

Setelah membuat view nya langkah selanjutnya menambahkan form tag HTML di vue js dengan beberapa jenis input yaitu name, last name, nomor identitas, jenis kelmin dan alamat.

berikut ini kodingan pada di file RegistrationView.vue :

<template>

    <form @submit.prevent="onSubmit">
        <label>email: </label>
        <input v-model="email" placeholder="email" /> <br>

        <label>name: </label>
        <input v-model="name" placeholder="First Name" /> <br>

        <label>last name: </label>
        <input v-model="lastName" placeholder="Last Name" /> <br>

        <label>nomor identitas:</label>
         <input v-model="nomorIdentitas" placeholder="nomor identitas" /> <br>

        <label>jenis kelamin: </label>

        pria <input type="radio" value="pria" v-model="jenisKelamin" /> | wanita <input type="radio" value="wanita" v-model="jenisKelamin" /> <br>

        alamat: <textarea v-model="about"></textarea> <br>

        <input type="submit" value="Simpan" class="btn btn-block" />

        <p></p>
    </form>
</template>

<script>
  export default {
        name : 'AddInformation',
        data (){
            return {
                email : '',
                name : '',
                lastName : '',
                nomorIdentitas : '',
                jenisKelamin : '',
                about : '',
            }
        },
        methods : {
            onSubmit(){
                console.log('email :', this.email);
                console.log('name :', this.name);
                console.log('lastName :', this.lastName);
                console.log('nomorIdentitas :', this.nomorIdentitas);
                console.log('jenisKelamin :', this.jenisKelamin);
                console.log('about :', this.about);
            }
        }
    }
</script>

<style>

</style>

Penjelasan :

• <form @submit.prevent="onSubmit"> pada bagian ini terdapat pemanggilan prevent yang artinya adalah menghalangi form post berpindah halaman, karena dengan cara ini post data dari form di handle oleh javascript dan diolah di javascript tanpa berpindah antara halaman dan di proses oleh function onSubmit.

• di setiap form input di beri v-model="about" atau v-model yang artinya setiap input akan di asigne ke value atribut tersebut yang sudah diinisiasi di bagian function data().

Kesimpulan

Demikian tutorial baru sampai input dan proses form di vue js, tutorial selanjutnya akan membahas form kirim lewat rest atau di update pada post ini.