Pada pembahasan sebelumnya mengenai Bantuan Computed Property pada Vue Js , hasil perjumlahan akan tampil secara otomatis, namun kali ini kita akan mengubah sedikit alur programnnya.

Berikut alur program yang baru kita ubah:

  • Nilai jumlah pada awalnya adalah kosong
  • Ketika tombol Hitung kita klik, maka nilai jumlah akan berubah sesuai dengan hasil yang sebenarnya

Nah berarti ada tombol Hitung yang ketika diklik baru mengubah nilai kosong pada jumlah menjadi hasil dari nilai perjumlahan yang sebenarnya. Gimana yaa caranya? Simak script dibawah ini:

 

Keterangan yang perlu diperhatikan:

  • Nah pada Data kita menentukan nilai dari Jumlah adalah null, atau kosong
  • Setelah itu kita disini menggunakan Bantuan Methods dari Vue Js, bukan menggunakan Bantuan Computed dari Vue Js lagi
  • Lalu kita membuat sebuah fungsi dengan nama proses
  • Sesuai dengan alur program yang kita ubah diawal, berarti nilai Jumlah yang awalnya adalah kosong, akan digantikan dengan hasil dari nilai perjumlahan yang sebenarnya dari Fungsi proses tsb.
  • Maka dari itu ditombol atau tag button kita tambahkan sebuah EVENT yaitu CLICK, (untuk event akan dibahas di tutorial selanjutnya)

 

Kesimpulannya adalah: untuk menangani jika ada event yang dilakukan, maka Bantuan Methods dari Vue Js diperlukan, dan begitupula sebaliknya. Jika nilai langsung keluar tanpa ada event untuk pemicunya, maka lebih baik dan ideal menggunakan Bantuan Computed dari Vue Js.