Tentang Computed Property Pada Vue Js

Sekarang kita akan belajar tentang computed property. Computed property ini kita bisa membuat satu property atau satu variabel yang mana property tersebut akan tergantung dengan property yang lainnya artinya dengan computed ini bila kita mengubah property A maka otomatis property B atau property C yang tergantung dengan property A nya dia juga akan ikut berubah. Jadi itu dia konsep computed property. Saya akan lihatkan contoh sederhana saya mempunyai property harga dan quantitynya serta total belanjanya sebagai berikut

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-1

Lalu kita akan berikan nilainya sebagai object datanya yang mana harga saya berikan 1000 sebagai nilai defaultnya dan nilai 1 untuk property qty 

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-2

Dan sekarang kita akan menggunakan property computed penulisannya seperti berikut

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-3

Kemudian didalamnya akan ada property totalnya. Property total ini saya akan jadikan sebuah fungsi atau metode dimana kita akan langsung mereturn atau mengembalikan nilai harga yang dikalikan dengan nilai qtynya

Sebagai catatan teman teman untuk bisa mengakses object datanya kita gunakan kata this lalu di ikuti dengan nama propertynya. 

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-5

Jadi konsepnya property total ini akan tergantung dengan nilai qtynya atau nilai dari jumlah belinya dan kalo quantitynya 1 maka total belanjanya menjadi 1000

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-6

Dan bila kita lihat sekarang maka hasilnya benar yaitu hasil perkalian dari harga barang dan jumlah yang dibeli. Tapi menariknya kalo saya mengubah nilai property qtynya menjadi 4 didalam consolenya dengan menuliskan vObj sebagai Object Vuenya lalu property qty sebagai berikut

Tentang-Computed-Property-Pada-Vue-Js-17-04-2017-6

Maka bukan cuma qtynya yang berubah tapi total belanjanya juga ikut berubah. Nah itu dia kegunaan computed property yang mana nilai-nilai yang tergantung dengan nilai lainnya maka nilai tersebut akan ikut berubah. Itu dia tentang computed property pada Vue js. Semoga jelas dan sampai jumpa.

17 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat