Tutorial Vue JS Filter & Form

Vue JS Filter & Form

Halo teman - teman pada tutorial kali ini saya akan membahas mengenai pembuatan form dan filter menggunakan vue js silahkan di simak dan di coba yah

Vue Form

Ok tutorial yang pertama adalah pembuatan form menggunakan vue js dan form ini nantinya akan disimulasikan di server menggunakan php dan hasil dari inputan juga akan di tampilkan di bawah

1. Buatlah file baru dan masukan kode program seperti ini

Pada kodingan di atas pembuatan form tersebut menggunakan v-model yang hasil inputan akan tampil di bawah form lalu form multiple select dan radio menggunakan data list yang mengambil data nya di options dan opsis lalu form ini akan di validasi menggunakan methods yang validasi nya apabila error akan ditampilkan di alert dan juga hasil inputan akan di tampilkan di server menggunakan php 

Untuk kodingan php nya buatlah folder di htdocs dan di dalam folder tersebut buatlah file baru dan masukan kode nya seperti ini

Sebelum menjalankan program terlebih dahulu harus menyalakan apache pada xampp atau server local yang sering kalian gunakan 

Apabila di jalankan maka akan muncul tampilan seperti ini

Dan apabila form tersebut tidak sesuai dengan validasi maka akan muncul tampilan seperti ini

Lalu apabila validasi form nya berhasil maka akan muncul tampilan seperti ini

Pada saat validasi nya berhasil maka di console akan muncul data data yang telah di inputkan dan data tersebut telah berhasil dimasukan ke server local menggunakan php

Selesai

Vue Filter

Tutorial selanjutnya yaitu pembuatan filter pada list yang nantinya filter tersebut akan menyeleksi data berdasarkan filter yang dimasukan. pada tutorial kali ini filter yang dimasukan berupa form keyword

Buatlah file baru dan masukan kode program seperti ini

Pada kodingan diatas akan membuat list dalam bentuk tabel yang diambil dari data data yang ada di dalam list vue js dan untuk filter keywordnya menggunakan function filterProducts yang ada di dalam computed yang nantinya data tersebut akan di filter berdasarkan name yang dimasukan ke keyword 

Apabila di jalankan maka akan muncul tampilan seperti ini

Apabila dimasukan inputan name pada keyword maka akan muncul tampilan seperti ini

Pada saat dimasukan inputan ke dalam form keyword maka list tabel akan memfilter sesuai data yan di inputkan

Selesai

Kesimpulan : dengan adanya vue js form dan filter maka akan memudahkan pengguna dalam menghandle pembuatan form dan bisa juga memfilter dari banyak nya data

Untuk source code dan juga assets seperti gambar bisa kunjungi link github saya disini

Ok mungkin tutorial nya sudah selesai dan kalian bisa mencoba tutorial kali ini terima kasih