Melanjutkan seri belajar VueJS, pada kesempatan kali ini kita akan belajar tentang computed properties. Inline expression didalam Vue.js sangat mudah dan menjadi pilihan yang dapat digunakan untuk case yang sederhana, akan tetapi untuk case yang memiliki logika yang rumit sebaiknya menggunakan computed properties. Sebab dengan memasukkan logic yang rumit kedalam style inline expression akan merepotkan anda dalam me-mantain code anda. Sebagai contoh:
<div id="dw">
{{ pesan.split('').reverse().join('') }}
</div>
Tak ada yang salah dengan penulisan code diatas, sebab dapat berjalan sebagaimana mestinya. Masalahnya adalah apabila anda ingin menampilkan hasil yang sama pada tempat yang berbeda, tentu saja menuliskan code tersebut secara berulang tidaklah efektif, maka kita dapat menggunakan computed properties untuk mengatasi permasalahan tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Computed Properties - Daengweb</title>
</head>
<body>
<div id="dw">
<p>Hasil {{ a }} + 1 = {{ hasil }}</a>
<p>Total nilai = {{ hasil }}</p>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#dw',
data: {
a: 1
},
computed: {
hasil: function() {
return this.a + 1;
}
}
});
</script>
</body>
</html>
Contoh diatas masih menggunakan logika yang sederhana dan juga tak akan ada masalah ketika menggunakan style inline expression, akan tetapi bagaimana jika cukup kompleks, seperti mesin hitung sederhana. Mari kita lihat apakah masih mungkin dilakukan dengan inline expression atau tidak?
<!DOCTYPE html>
<html>
<head>
<title>Computed Properties - Daengweb</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="dw" class="container">
<h1>Perhitungan Sederhana</h1>
<div class="form-group">
<label>Nilai A</label>
<input type="number" v-model="a" class="form-control">
</div>
<div class="form-group">
<label>Operator</label>
<select class="form-control" v-model="o">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
</div>
<div class="form-group">
<label>Nilai B</label>
<input type="number" v-model="b" class="form-control">
</div>
<h2>Hasil:</h2>
<p>Nilai A = {{ a }}</p>
<p>Nilai B = {{ b }}</p>
<p>Maka A {{ o }} B = {{ hasil }}</p>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#dw',
data: {
a: '1',
b: '1',
o: ''
},
computed: {
hasil: function() {
switch (this.o) {
case "+":
return parseFloat(this.a) + parseFloat(this.b)
break;
case "-":
return parseFloat(this.a) - parseFloat(this.b)
break;
case "*":
return parseFloat(this.a) * parseFloat(this.b)
break;
case "/":
return parseFloat(this.a) / parseFloat(this.b)
break;
}
}
}
});
</script>
</body>
</html>
Case diatas, kita akan menampilkan hasil operasi nilai A dan nilai B, kemudian menggunakan parseFloat() untuk memastikan nilai yang diterima telah berubah menjadi tipe integer.
Computed Properties VS Methods
Sekilas computed properties dan methods hampir serupa dan bahkan mirip, lalu apakah perbedaan keduanya? Jika code diatas kita masukkan kedalam methods, maka hasil yang akan kita peroleh akan sama. Namun, bedanya adalah computed properti di-cache berdasarkan dependecies mereka, sehingga computed properties hanya akan menjalankan kembali fungsinya apabila beberapa dependencies (nilai yang dibutuhkan) terjadi perubahan. Itu berarti selama nilai dari variable A, B dan Operator tidak mengalami perubahan maka function operasinya tidak akan dijalankan kembali. Sedangkan methods, setiap kali ada permintaan maka akan menjalankan kembali fungsinya.
Lalu mengapa kita perlu menggunakan computed properties? Hal ini hanyalah masalah pilihan dan tergantung kebutuhan, dimana data yang perubahannya tidak sesering mungkin dan apalagi digunakan berkali-kali sebaiknya disimpan di computed properties, sedangkan methods berlaku sebaliknya.
Filter Array Dengan Computed Propeties
Computed properties juga dapat digunakan untuk mem-filter sebuah Array. Menggunakan computed properties untuk melakukan filtering memberikan anda kontrol secara penuh dan lebih fleksibel. Contoh kasus, kita akan mencari berapa banyak siswa yang memiliki nilai diatas > 25 didalam data yang berbentuk Array.
<!DOCTYPE html>
<html>
<head>
<title>Computed Properties - Daengweb</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="dw" class="container">
<h1>Siswa yang memiliki nilai diatas 25 Sebanyak = ({{ tertinggi.length }} Orang)</h1>
<ul class="list-group">
<li v-for="siswa in siswas" class="list-group-item" >
{{ siswa.nama }} Belajar "{{ siswa.matkul }}"
dan mendapatkan nilai {{ siswa.nilai }}.
</li>
</ul>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#dw',
data: {
siswas: [
{
matkul: "VueJS",
nama: "Anugrah Sandi",
nilai: 28
},
{
matkul: "Matematika",
writer: "Asep",
nilai: 8
},
{
matkul: "Fisika",
writer: "Nuge",
nilai: 51
},
{
matkul: "Laravel",
writer: "Neng",
nilai: 74
},
]
},
computed: {
tertinggi: function() {
return this.siswas.filter(function(item){
return item.nilai > 25;
});
}
}
});
</script>
</body>
</html>
Hasil filtering menggunakan computed properties diatas dapat kita akses dimanapun tanpa perlu menjalankan kembali function tersebut selama tidak terjadi perubahan nilai.
Mudah bukan? Seperti biasa untuk memperdalam pengetahuan anda tentang bagaimana cara kerja dari computed properties, silahkan di explore dengan kasus yang berbeda. Sampai jumlah di seri selanjutnya. Semoga bermanfaat.
Comments