Cara Sorting Array Berdasarkan Dengan VueJs

Berjumpa lagi dalam Website Dumetschool. Pada kesempatan ini kita akan belajar tentang Cara Sorting Array Berdasarkan Dengan VueJs. Jadi kita akan mencoba menyorting data dalam array berdasarkan huruf abjad. Bagaimana kalau langsubg saja kita membuatnya yuk ikuti langkah-langkah berikut ini:

Pertama buat strukturnya berisi HTML seperti code berikut:

<div class="container mt-5">
		<div class="row">
			<div class="col-md-8 offset-2 mt-3">
				<div id="Myart">
				  <button type="button" class="btn btn-primary my-2" @click="sortByLength">Sort by ASC</button>
				  <button type="button" class="btn btn-warning my-2" @click="sortByReverse">Sort by DESC</button>
				  <ul class="list-group list-group-flush">
				    <li class="list-group-item" v-for="list in lists">{{list}}</li>
				  </ul>
				</div>
			</div>
		</div>
	</div>

disini saya akan menyisipkan library dari Bootstrap dan VueJS letakkan pada bagian tag <head>

<head>
	<meta charset="UTF-8">
	<title>Cara Sorting Array Berdasarkan Dengan VueJs</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
</head>

Baiklah sekarang untuk bagian datanya akan ditampilkan pada expression {{ list }}, coba ketikkna script dibawah ini:

<script>
		new Vue({
		  data(){
		    return{
		      lists:['CodeIgniter',
		      		 'PHPCake',
		      		 'YII', 
		      		 'Slim', 
		      		 'Laravel',
		      		 'Symfony',
		      		 'Zen Framework',
		      		 'Silex',
		      		 'PhalconPHP']
		    }
		  }, 
		  methods:{
		    sortByLength() {
		      var fw = this;
		      fw.lists = fw.lists.sort(fw.complengths);
		    },
		    sortByReverse() {
		      var fw = this;
		      fw.lists = fw.lists.reverse();
		    },
		    complengths(x, y) {
		      if (x < y) return -1;
		      if (x > y) return 1;
		      return 0;
		    }
		    
		  }
		}).$mount('#Myart')
	</script>

Pada script diatas bisa diperhatikan untuk sorting buat pengecekan pada fungsi complengths(x, y). Jadi silahkan simpan lalu buka pada browser masing-masing maka tampilan seperti ini:

Demikian artikel yang bisa saya sampaikan, semoga bisa menambahkan referensi dalam belajar. Sampai jumpa dilain kesempatan dan selamat mencoba mengexplore lagi.

terima kasih

Cara Sorting Array Berdasarkan Dengan VueJs

Kategori