Pada tutorial kali ini kita akan membahas Cara Mengolah Data Komples dengan Bantuan Computed Property pada Vue Js, sebenarnya ada beberapa bantuan yang sudah di sediakan oleh Vue Js. Nanti kita akan bahas satu persatu.

Bantuan yang akan kita bahas adalah bernama Computed Property. Yang dimaksud properti ini adalah yang mengolah value yang berasal dari data atau berasal dari v-model, menyimpan value perhitungan tersebut pada cache, mengembalikan nilainya, dan mengevaluasi perubahannya.

Format untuk bantuan Computed Property adalah:

 

Penulisan nama_variable: function() { … } juga dapat dipersingkat dengan cukup menuliskan nama_variable () { … }, seperti dibawah ini

 

Setelah berkutat dalam teori mengenai bantuan Computed Property pada Vue Js, berikut disediakan sebuah alur program yang akan kita buat, untuk sebagai contoh:

  • Mendefinisikan sebuah variable baru dengan nama angka1 dan angka2 yang mempunyai nilai tertentu
  • Mendefinisikan sebuah variable baru dengan nama jumlah yang isinya merupakan hasil perjumlahan antara angka1 dan angka2

Lalu bagaimana penerapan alur program tersebut? Mari kita buat struktur html seperti dibawah ini:

 

Keterangan:

  • {{ jumlah }} didapat dari fungsi jumlah yang terdapat pada bantuan Computed Property pada Vue Js
  • this.angka1 itu mengacu pada angka1 yang terdapat pada data. Karena terdapat pada lingkup var app, maka digunakan kata this

Adapun hasilnya adalah

 

WhatsApp chat