# Filter
removed

# Gambaran Umum

Fitur filter dihapus dari Vue versi 3.0 dan tidak didukung lagi.

# Sintaks Vue versi 2.x

Pada Vue versi 2.x, pengembang dapat menggunakan filter untuk menampilkan teks dalam bentuk tertentu.

Sebagai contoh:

<template>
  <h1>Saldo Akun Bank</h1>
  <p>{{ saldoAkun | mataUangIDR }}</p>
</template>

<script>
  export default {
    props: {
      saldoAkun: {
        type: Number,
        required: true
      }
    },
    filters: {
      mataUangIDR(value) {
        return 'IDR ' + value
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Walaupun terlihat praktis, namun filter membutuhkan sebuah sintaks khusus yang bertentangan dengan asumsi bahwa seluruh ekspresi yang terdapat dalam kurung kurawal merupakan JavaScript murni, dimana hal tersebut akan membutuhkan biaya belajar dan implementasi.

# Pembaruan Vue versi 3.x

Pada Vue versi 3.x, filter dihapus dan tidak didukung lagi. Sebaliknya, kami menyarankan Anda untuk mengganti filter dengan pemanggilan method atau properti computed.

Berdasarkan contoh di atas, berikut merupakan sebuah contoh bagaimana cara tersebut dapat diimplementasikan.

<template>
  <h1>Saldo Akun Bank</h1>
  <p>{{ saldoDalamIDR }}</p>
</template>

<script>
  export default {
    props: {
      saldoAkun: {
        type: Number,
        required: true
      }
    },
    computed: {
      saldoDalamIDR() {
        return 'IDR ' + this.saldoAkun
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Strategi Migrasi

Dibandingkan menggunakan filter, kami menyarankan Anda untuk mengganti filter dengan properti computed atau method.

# Filter Global

Apabila Anda menggunakan filter yang didaftarkan secara global dan menggunakan filter tersebut pada aplikasi Anda, tentunya mengganti filter tersebut dengan properti computed atau method pada setiap komponen merupakan hal yang tidak praktis.

Sebaliknya, Anda dapat membuat filter global Anda dapat diakses oleh seluruh komponen menggunakanglobalProperties:

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  mataUangIDR(value) {
    return 'IDR ' + value
  }
}

1
2
3
4
5
6
7
8

Kemudian Anda dapat mengganti setiap template menggunakan objek $filters tersebut seperti berikut:

<template>
  <h1>Saldo Akun Bank</h1>
  <p>{{ $filters.mataUangIDR(saldoAkun) }}</p>
</template>

1
2
3
4

Perlu diingat bahwa dengan menggunakan pendekatan ini, Anda tidak dapat menggunakan properti computed. Anda hanya dapat menggunakan method, karena penggunaan method merupakan hal yang masuk akal bila dilihat dalam konteks komponen secara individu.

← API Events Fragments →