Listbox atau bisa juga disebut tag select yang merupakan bagian dalam sebuah form pada html, atau yang digunakan untuk menampilkan list pilihan dengan tujuan user atau pengguna memilih dari salah satu pilihan yang sudah disediakan. Dalam pembahasan kali ini saya akan membagikan tutorial bagaimana cara memindahkan datalist pada listbox satu ke listbox kedua. Jadi jangan bingung bagaimana cara pembuatan swicth datalist pada listbox dengan vue.js, yuk mari ikutin langkah-langkah dalam membuat.Langkah yang pertama siapkan terlebih dahulu file HTML , disini saya menggunakan tampilan bootstrap jadi sahabat bisa dengan cara offline atau menggunakan library CDN Bootstrap boleh dilihat disini, lalu untuk file Vue.js saya memakai library CDN Vue.js bisa copy link yang dipakai disini, coba sekarang ketikkan script berikut ini :

Pada class button diberikan functionmasing-masing sesuai icon atau code lambang html.

Langkah berikutnya ketikkan script dari javascript dibawah ini :

Jika sudah sekarang jalankan pada browser masing-masing maka tampilannya akan sebagai berikut:

1-Cara Switch Data Pada Listbox Dengan Vue.js

Gambar dibawah ini ,tampilan hasil saya pindahkan beberapa data dari sebelah kiri ke sebelah kanan;

2-Cara Switch Data Pada Listbox Dengan Vue.js

Baiklah demikian pembahasan artikel kali ini tentang cara pembuatan swicth datalist pada listbox dengan vue.js, sampai jumpa pada artikel tutorial lainnya. Semoga bermanfaat dan selamat mencoba.

Terima Kasih.