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 :
- https://vuejs.org/v2/guide/filters.html
- https://www.youtube.com/watch?v=Dh0E9aaedEA&index=6&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07