Membuat sistem tag dengan Vuejs

Bagaimana cara membuat sistem tag pada sisi frontend dengan vuejs? memberikan saran berdasarkan apa yang user ketik, kita akan belajar banyak event, bisa memilih dan juga menghapus item dengan mouse ataupun keyboard

Update kelas terakhir : 7 tahun yang lalu

cover membuat-sistem-tag-dengan-vuejs.jpg

intro vuejs tag sistem

Intro untuk kelas membuat sistem tag dengan vue js, dengan ini kita bisa membuat sistem tag yang bisa diimplementasikan seperti pada forum, blog, dan lain-lain

todolist dan kerangka html css

Mulai dengan membuat html dan css sebagai kerangka aplikasi yang dibuat. Selain itu kita belajar memecahkan tugas besar menjadi tugas-tugas kecil yang bisa dikerjakan satu per satu dalam bahasa manusia

toggle data ketika user mengetik

Ketika user mulai mengetik sesuatu pada input, kita akan memunculkan daftar tag yang tersedia, dan akan disembunyikan ketika tidak ada input

memilih dengan panah bawah

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke bawah ditekan

memilih dengan panah atas

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke atas ditekan

tag berdasarkan input user

karena tidak perlu menampilkan semuanya sekaligus, maka kita akan memunculkan daftar tag berdasarkan apa yang user ketik pada input

pilih salah satu tag dengan enter

Memilih salah satu tag dengan event keyboard enter, jadi selain sudah bisa terhighlight dengan tanda panah, kita juga sudah bisa memilih tagnya

menghapus dengan tombol backspace/delete

Bagaimana jika user ingin menghapus tag yang sudah terpilih, kita mulai dengan menggunakan event keyboard backspace ataupun delete untuk menghapus entri terakhir

menghapus dengan klik

Bagaimana jika user ingin menghapus tag yang sudah terpilih sebelumnya namun bukan entri terakhir, kita lihat cara menghapus berdasarkan yang diklik

highlight dan milih dengan mouse

selain memilih dengan tanda panah keyboard, kita juga harus bisa memilih berdasarkan mouse, tergantung apa yang dihighlight dan apa yang diklik

menghapus tag yang sudah digunakan

Jika satu tag sudah dipilih sebelumnya, maka tidak perlu lagi ditampilkan pada entri berikutnya, dengan ini kita mencegah ada tag yang sama pada satu entri