Vue.Js Form dan Filtering

Hallo kawan. Kali ini saya akan melanjutkan tentang Vue.Js dan akan membuat tutorial membuat form dan filtering. Form ini nantinya akan menampilkan inputan ker server.

FORM

Pertama buat projek baru .html dan masukan kode berikut. Kita akan menggunakan Boostrap dan memebutuhkan kode berikut, dan tutorial kali ini harus terkoneksi dengan internet.

Selanjutnya masukan kode berikut untuk membuat form yang sudah terhubung dengan variable-variable dari fungsi vuenya.

Jika kita liat untuk hasilnya akan seperti pada gambar berikut:

Akan tetapi jika kodenya belum selesai maka akan ada error.

Lanjut tambahkan kode berikutnya dari gambar di bawah ini.

kode di bawah ini adalah untuk output yang terpilih dari inputan form di atas

Jika kita lihat hasilnya akan seperti gambar dibwah ini.

Selanjutya tambahkan kode dibwah ini. Kode dibawah ini adalah untk penginputan ke kode output, dan pengiriman ke server.

Selanjutnya buat file baru dengan nama proes.php dan masukan kode berikut:

Dan sekarang coba hasilnya seperti pada gambar berikut:

Lanjut isi inputan dari form tersebut maka di output akan muncul secara otomatis

Selanjutnya klik kanan dan pilih inspect dan di tab console. Lanjut kira klik kirim di form dan hasilnya akan terkirim ke server seperti pada gambar berikut:

Filtering

Selanjutnya kita akan membuat filtering, dimana ada inputan berupa searching produk-produk yang ada.

Seperti diatas kita juga menggunakan Boostrap untuk tampilan kita, masukan kode berikut untuk tampilan card.

Selanjutnya masukan kode berikut untuk mengisi data-data dari tampilan card tersebut dengan kode vuenya.

Dan untuk folder projeknya seperti pada gambar berikut:

Dan hasilnya seperti pada gambar berikut: