Bagaimana update data pada Component yang sama di VueJs?

vue.js

Hallo kawan-kawan, akhirnya saya bisa kembali berbagi. Kali ini saya akan berbagi tips dan trick bagaimana melakukan update data pada tampilan sebuah halaman tepatnya pada component vue 2 jika memiliki routing yang sama.

Mari kita asumsikan disini kita memiliki sebuah routing dengan nama /data/member/:id dan kita memiliki component member.vue. Disini kita memiliki id sebagai parameter yang untuk mengambil data dari API. Data akan berubah apabila id pada url berubah tetapi path pada url masih sama yaitu /data/member/. Kita ambil contoh jika component member.vue seperti dibawah ini.

member.vue
..................
<template>
  <p> Nama   : {{nama}} </p>
  <p> Alamat : {{alamat}} </p>
</template>
<script>
 export default {
   data() {
     return {
       nama: '',
       alamat: ''
     }
   },
   methods: {
    getMember(id){
     this.nama = response.nama,
     this.alamat = response.alamat
    }
   },
   mounted() {
     this.getMember(this.$route.params.id)
   }
 }
</script>

Kita asumsikan lagi bahwa kita memiliki member dengan ID 1 dan ID 2. Apabila sebelumnya kita beralih dari halaman Dashboard, misal dengan path /dashboard kemudian beralih ke /data/member/1, maka component member.vue akan mengambil data dari API untuk member ID 1 kemudian menampilkannya. Pada proses ini data akan dengan mudah diambil karena component baru saja di mounting dan memanggil method getData(). Namun, apabila kita berpindah ke halaman member ID 2 dengan url yaitu/data/member/2 proses ini tidak akan mengubah data yang sebelumnya telah di mounting pada component member.vue serta akan tetap menampilkan data dari member 1 padahal url pada browser kita sudah berubah menjadi /data/member/2.

Bagaimana hal ini bisa terjadi ?

Hal ini dikarenakan pada saat sebuah component di berhasil di mounting dan ketika kita beralih ke url yang sama dengan url dari si component tersebut, maka component tidak akan melakukan reload atua re-mounting, sehingga data yang saat ini ditampilkan tidak akan berubah.

Bagaimana cara agar mengetahui jika ada perubahan pada url di component yang sama ?

Baik, disini kita akan memanfaatkan properties dari vue yaitu watch. Properties ini akan memeriksa apakah ada sebuah perubahan yang terjadi pada sebuah component. Dalam kasus ini kita akan memanfaatkan watch untuk melihat parameter dari route yang ada, disini paramternya yaitu id. Jadi apabila paramter id pada routing mengalami perubahan, maka kita akan memanggil method getData() untuk mengubah data nama dan alamat. Kita akan modifikasi component member.vue menjadi seperti dibawah ini.

...
...
...
   mounted() {
     this.getMember(this.$route.params.id)
   },
   watch: {
     '$route.params.id': {
         handler(id) {
           this.getData(id)
         },
      }
   }
</script>

Seperti dijelaskan sebelumnya, disini watch akan melihat value dari $route.params.id jika mengalami perubahan, maka akan memanggil method getData() dengan memasukan valueid yang telah berubah saat ini dari url /data/member/:id. Misal awalnya adalah /data/member/1 maka $route.params.id adalah bernilai 1 dan menjalankan method getData(1), apabila kita menuju ke /data/member/2 maka $route.params.id akan berubah menjadi 2 sehingga akan menjalankan method getData(2) yang dipanggil di dalam properties watch.

Oke mungkin begitu saja tips dan trick yang bisa saya bagikan, mungkin ini bukan sebuah best practice tapi bisa menjadi solusi jika kawan-kawan mengalami hal yang serupa.

Terimakasih sudah membaca. Semoga bermanfaat dan mohon maaf jika ada salah dari pemahaman saya. Silahkan beri komentar jika ada kritik dan saran yang membangun. :D