Computed property pada Vue.js memilki cara kerja yang mirip dengan sebuah kalkulator. Dimulai dari membaca value milik property, proses property dengan logic yang ditentukan, kemudian hasil pemrosesan dikembalikan lewat return. Akan lebih mudah jika dijelaskan langsung dengan contoh. Sekarang buat file latihan006.html, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 006</title>
    
</head>
<body>
    <div id="app">
        <h1>{{ pesanHeader }} dibalik jadi : {{ balikPesanHeader }}</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({    
            el: '#app',
            data: {
                pesanHeader: 'Halo Vue',
            },
            computed: {

                balikPesanHeader() {
                    return this.pesanHeader.split('').reverse().join('');
                }

            }
        });
    </script>
</body>
</html>

Pada kode di atas, saya mencoba menampilkan nilai property sebelum dan setelah diproses dengan computed, masing-masing melalui expression {{ pesanHeader }} dan {{ balikPesanHeader }}. String 'Halo Vue' dibalik menjadi 'euV olaH'dengan baris kode this.pesanHeader.split('').reverse().join(''), hasilnya seperti yang dapat Anda lihat di bawah :

cara kerja computed property pada vue.js

Pemrosesan property dengan computed tidak hanya dapat dilakukan untuk data bertipe string saja, tetapi juga bisa diterapkan ke data berbentuk array atau objek.

Perbarui kode pada file latihan006.html menjadi seperti berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 006</title>
    
</head>
<body>
    <div id="app">
        <h1>{{ pesanHeader }} dibalik jadi : {{ balikPesanHeader }}</h1>

        <h2>Kota di Indonesia</h2>
        <ul>
            <li v-for="kota in listKota">{{ kota.namaKota }}</li>
        </ul>

        <h2>Kota di Pulau Sulawesi</h2>
        <ul>
            <li v-for="kota in listKota" v-if="kota.diSulawesi">{{ kota.namaKota }}</li>
        </ul>

        <h2>Kota di Luar Pulau Sulawesi</h2>
        <ul>
            <li v-for="kota in kotaDiSulawesi">{{ kota.namaKota }}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({    
            el: '#app',
            data: {
                pesanHeader: 'Halo Vue',
                listKota: [
                    { namaKota: 'Kendari', diSulawesi: true },
                    { namaKota: 'Jogja', diSulawesi: false },
                    { namaKota: 'Surabaya', diSulawesi: false },
                    { namaKota: 'Makassar', diSulawesi: true },
                    { namaKota: 'Bandung', diSulawesi: false },
                    { namaKota: 'Semarang', diSulawesi: false },
                    { namaKota: 'Manado', diSulawesi: true },
                ]
            },
            computed: {

                balikPesanHeader() {
                    return this.pesanHeader.split('').reverse().join('');
                },

                kotaDiSulawesi() {
                    return this.listKota.filter(kota => !kota.diSulawesi);
                }

            }
        });
    </script>
</body>
</html>

Pada kode di atas, saya membuat 3 (tiga) perulangan v-for berbeda untuk me-render property listKota yang berbentuk array / objek. Masing-masing perulangan tersebut adalah :

Kota di Indonesia
<li v-for="kota in listKota">{{ kota.namaKota }}</li>
Me-render elemen HTML untuk seluruh property yang ada di dalam array / objek listKota.

Kota di Pulau Sulawesi
<li v-for="kota in listKota" v-if="kota.diSulawesi">{{ kota.namaKota }}</li>
Hanya me-render elemen HTML untuk property dengan kondisi diSulawesi:true di dalam array / objek listKota. Hasil filter yang diperoleh : Kendari, Makassar dan Manado.

Kota di Luar Pulau Sulawesi
<li v-for="kota in kotaDiSulawesi">{{ kota.namaKota }}</li>
Render elemen HTML tidak lagi dilakukan untuk array / objek listKota, tapi untuk kotaDiSulawesi hasil computed. Baris kode this.listKota.filter(kota => !kota.diSulawesi) akan menyeleksi array / objek listKota untuk property dengan kondisi diSulawesi:false. Perhatikan operator NOT ! di depan !kota.diSulawesi. Hasil filter yang diperoleh : Jogja, Surabaya, Bandung dan Semarang.

Hasil akhir eksekusi file latihan006.html dapat dilihat pada gambar berikut :

cara kerja computed property pada vue.js