Cara Switch Datalist Pada Listbox Dengan Vue.js

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 :

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>	
	<div id="app">
		<div class="container">
			<h1>{{ title }}</h1>
			<div class="row">
				<div class="col-md-5">
					<select size="30" class="form-control" id="list1" multiple>
						<option v-for="item1 in list1">{{ item1 }}</option>
					</select>
				</div>
				<div class="col-md-">
					<button class="btn btn-primary btn-block mb-2" @click="allToRight">&raquo;</button>
					<button class="btn btn-primary btn-block mb-2" @click="oneToRight">&rsaquo;</button>
					<button class="btn btn-primary btn-block mb-2" @click="oneToLeft">&lsaquo;</button>
					<button class="btn btn-primary btn-block mb-2" @click="allToLeft">&laquo;</button>
				</div>
				<div class="col-md-5">
					<select size="30" class="form-control" id="list2" multiple>
						<option v-for="item2 in list2">{{ item2 }}</option>
					</select>
				</div>			
			</div>
		</div>
	</div>

</body>
</html>

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

Langkah berikutnya ketikkan script dari javascript dibawah ini :

	<script>
		var app = new Vue({
			el:'#app',
			data:{
				title: 'Cara Switch Data Pada Listbox Dengan Vue.js',
				// Data list Bagian Kiri
				list1: ['Web Master', 'Web Design', 'Web Programming', 'Mobile Apps', 'Laravel', 'Angular'],
				// Data list Bagian Kanan
				list2: ['Design Grapish', 'Motion Grapish','Digital Marketing', 'Coding For Kids']
			},
			methods:{
				// Fungsi untuk memidahkan satu per satu datalist dari kiri ke sebelah kanan
				oneToRight	: function(){
					var select = document.getElementById('list1').value
					if(select != ""){
						this.list2.push(select)
						var del = this.list1.indexOf(select)
						this.list1.splice(del, 1)
					}
				},
				// Fungsi untuk memidahkan satu per satu datalist dari kanan ke sebelah kiri
				oneToLeft	: function(){
					var select = document.getElementById('list2').value
					if(select != ""){
						this.list1.push(select)
						var del = this.list2.indexOf(select)
						this.list2.splice(del, 1)
					}
				},
				// Fungsi untuk memidahkan keseluruhan datalist ke sebelah kanan
				allToRight	: function(){
					for(var i = 0; i < this.list1.length; i++){
						this.list2.push(this.list1[i])
						var del = this.list1.indexOf(this.list1[i])
						this.list1.splice(del, 1)
					}
				},
				// Fungsi untuk memidahkan keseluruhan datalist ke sebelah kiri
				allToLeft	: function(){
					for(var i = 0; i < this.list2.length; i++){
						this.list1.push(this.list2[i])
						var del = this.list2.indexOf(this.list2[i])
						this.list2.splice(del, 1)
					}
				}
			}
		})
	</script>

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

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

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.