Daftar dan Belajar Sekarang!

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

Poin: 110 EXP

❱ Intro dan todolist

intro vuejs tag sistem todolist dan kerangka html css locked icon

❱ Memilih list Tag

toggle data ketika user mengetik locked icon memilih dengan panah bawah locked icon memilih dengan panah atas locked icon tag berdasarkan input user locked icon pilih salah satu tag dengan enter locked icon

❱ Menghapus tag

menghapus dengan tombol backspace/delete locked icon menghapus dengan klik locked icon

❱ Event mouse

highlight dan milih dengan mouse locked icon

❱ Closing

menghapus tag yang sudah digunakan locked icon

Detail Kelas

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


Membuat sistem tag dengan Vuejs

time icon 1 tahun yang lalu
level icon Pertengahan