Catatan Belajar Vue : Filters

Sebelumnya filters di vue itu bukan tentang pencarian kaya ngefilter data, ini lebih mirip helper. Untuk tahu maksudnya mending langsung tes saja. Bikin dulu HTML dengan struktur dasar seperti ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
  
    <div id="app">
      <p>d
      {{ text }}
      </p>
    </div>
  
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        text: 'Sebuah Text'
      }
     })
  </script>
</html>

Struktur di atas akan menghasilkan seperti ini.

 

 

Sekarang saya mau ubah text tersebut jadi huruf kapital semua, pake apa ? Computed bisa, tapi computed mah tulisan sebelumnya. Karena tulisan ini tentang filters berarti pake filters.

Sekarang saya mau ubah text tersebut jadi huruf kapital semua, pake apa ? Computed bisa, tapi computed mah tulisan sebelumnya. Karena tulisan ini tentang filters berarti pake filters.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
    
    <div id="app">
      <p>
      {{ text | UpperCase}}
      </p>
    </div>
  
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        text: 'Sebuah Text'
      },
      filters: {
        UpperCase(value) {
          return value.toUpperCase();
        }
      }
     })
  </script>
</html>

Hasilnya

Perhatikan pada bagian {{ text | UpperCase}} di sana setelah memunculkan properti textdiberi tanda | lalu diikuti nama filters. Tapi contoh di atas adalah contoh filters lokal alias hanya bisa diakses di instance itu saja, sekarang, contoh berikutnya filters global. Perhatikan struktur HTML di bawah ini.

!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
   
    <div id="app">
      <p>
      {{ text | UpperCase | LowerCase }}
      </p>
    </div>
  
  </body>
  <script>
  Vue.filter("LowerCase", function(value){
    return value.toLowerCase();
  });

   new Vue({
      el: '#app',
      data: {
        text: 'Sebuah Text'
      },
      filters: {
        UpperCase(value) {
          return value.toUpperCase();
        }
      }
     })
  </script>
</html>

Hasilnya

 

Filters LowerCase di sana bersifat global, sehinga wajib dideklarasikan di luar vue instance. Lalu lihat hasilnya tulisannya malah jadi huruf kecil semua padahal sudah ditambahkan filtersUpperCase, itu karena filters membaca fungsinya secara berurutan dari text awalnya yang ‘Sebuah Text’ diubah jadi ‘SEBUAH TEXT’ dan terakhir diubah lagi jadi ‘sebuah text’.

Lalu bedanya global dan lokal seperti apa, untuk jelasnya cek kembali struktur HTML di bawah.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
  
    <div id="app">
      <p>
      {{ text | LowerCase | UpperCase }}
      </p>
    </div>
    <div id="app-baru">
      <p>
      {{ text | LowerCase | UpperCase }}
      </p>
    </div>
   
  </body>
  <script>
  Vue.filter("LowerCase", function(value){
    return value.toLowerCase();
  });

   new Vue({
      el: '#app',
      data: {
        text: 'Sebuah Text'
      },
      filters: {
        UpperCase(value) {
          return value.toUpperCase();
        }
      }
     })

     new Vue({
        el: '#app-baru',
        data: {
          text: 'Sebuah Text Dua'
        }
       })
  </script>
</html>

Hasilnya

pada Hasil di atas yang pertama berhasil diubah kapital semua karena filters UpperCasedisimpan terakhir, lalu untuk yang di div app-baru kenapa masih tetep kecil ? Karena di instance vue yang app-baru tidak ada filters UpperCase, karena filters UpperCase itu adanya di lokal instance yang app.


Referensi :

  1. https://vuejs.org/v2/guide/filters.html
  2. https://www.youtube.com/watch?v=Dh0E9aaedEA&index=6&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07
Show Comments