Filter di Vue.js “intinya” digunakan untuk mengolah / mem-format string, tidak lebih tidak kurang. Ehh hanya sesederhana itu? Iya, hanya seperti itu. Penggunaan filter dapat menjadi alternatif jika Anda tidak suka mengolah string di dalam method. Agar lebih jelas, kita langsung praktek saja dengan contoh.

Mengolah String dengan Method

Sebelum membahas custom filter, saya akan terlebih dahulu menggunakan method untuk mengolah string. Buat file baru latihan015.html, kemudian copy paste kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 015</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="jumbotron text-center">
            <h1>Bootstrap 4</h1>
            <p>Latihan015 - Membuat Custom Filter Pada Vue.js</p>
          </div>
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div style="margin-top: 20px;">
                        <div class="card">
                            <div class="card-body">
                                <daftar-nama :array-nama=arrayNama>
                                    <template slot-scope="data">    
                                        <p class="card-text">
                                            {{ hurufKapital(data.nama) }}
                                        </p>
                                    </template>
                                </daftar-nama>
                                <tambah-data :array-nama=arrayNama></tambah-data>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="vue.js"></script>
    <script src="latihan015.js"></script>
</body>
</html>

dan file latihan015.js dengan baris kode :

Vue.component('DaftarNama', {
    props: ['array-nama'],
    template: `
        <ul>
            <li v-for="nama in arrayNama">
                <slot :nama="nama">{{ nama }}</slot>
            </li>
        </ul>
    `
});

Vue.component('TambahData', {
    props: ['array-nama'],
    template: `
        <div>
            <div class="form-group">
                <label for="nama">Nama</label>
                <input type="text" class="form-control" placeholder="Ketikkan Nama" v-model="namaBaru">
            </div>
            <button type="button" class="btn btn-primary" v-on:click="tambah">Tambah</button>
        </div>
    `,
    data() {
        return {
            namaBaru: '',
        }
    },
    methods: {
        tambah() {
            if (this.namaBaru.trim()) {
                this.arrayNama.push(this.namaBaru);
            }
            this.namaBaru = '';
        }
    }
});

new Vue ({    
    el: '#app',
    data: {
        arrayNama: []
    },
    methods: {
        hurufKapital(string) {
            return string.toLowerCase().replace(/\b./g, function(a){
                return a.toUpperCase();
            });
        }
    }
});

Pada kode di atas, saya menggunakan dua komponen berbeda, masing-masing adalah DaftarNama untuk me-render isi arrayNama dan TambahData untuk menambahkan data baru ke arrayNama setiap kali button di-klik. Di halaman HTML, expression {{ hurufKapital(data.nama) }} memanggil method hurufKapital() untuk membuat setiap huruf pertama dari kata yang diketik melalui <input type="text">menjadi kapital / uppercase.

Kedua komponen tersebut merupakan hasil penerapan dari empat materi saya sebelumnya (jadi tidak perlu dijelaskan lagi ya) :

Hasil eksekusi dari file latihan015.html dapat dilihat pada gambar berikut :

membuat custom filter pada vue js
Debugging di sidebar sebelah kanan menggunakan Chrome Extension Vue.js DevTools

Mengolah String dengan Custom Filter

Untuk menggunakan filter sebagai pengganti method dalam mengolah string hanya membutuhkan dua langkah. Pertama, ganti option methods:{} pada inisiasi Vue menjadi filters:{}. Kedua, modifikasi expression {{ hurufKapital(data.nama) }} menjadi {{ data.nama | hurufKapital }} (pipeline diletakkan depan nama filter yang akan dipanggil). Mudah bukan? Setelah itu, hasil yang diperoleh tidak akan berbeda dari cara sebelumnya (menggunakan method).

Pertanyaannya, lebih baik mengolah string melalui method atau custom filter? Kalau untuk ini, saya hanya memiliki satu jawaban : “suka-suka” alias “terserah” 🙂