4. Computed, Method, Watcher

tech

Table of Content

• Introduction
• Computed Property
• Methods
• Watcher

Introduction

Sebelumnya kita telah berkenalan denganV-If. Sekarang kita akan belajar tentang pengolahan data yg lebih kompleks dengan beberapa bantuan dari VueJS.

Computed Property

Properti ini mengelolah value yg berasal dari data atau berasal dari v-model, menyimpan value perhitungan tersebut pada cache, mengembalikan nilainya dan mengevaluasi perubahannya.

app.js

let app = new Vue({
el: '#app',
data: {
	bil1: 8,
	bil2: 3
},
computed: {
	jumlahkan: function(){
		return this.bil1 + this.bil2
	}
}
})

index.html

<div id="app">
    <b>{{ jumlahkan }}</b>
</div>

Methods

Untuk menangani jika ada event yg dilakukan, maka methods dibutuhkan. Sebaliknya, jika nilai langsung keluar tanpa ada event pemicunya, maka computed lebih ideal digunakan.

app.js

let app = new Vue({
el: '#app',
data: {
	bil1: 8,
	bil2: 3,
	hasil: ''
},
methods: {
	diproses(){
		return this.hasil = this.bil1 + this.bil2
	}
}
})

index.html

<div id="app">
    <h2>{{ bil1+' + '+bil2+' = '+hasil }}</h2>
    <button v-on:click="diproses">Tampilkan Hasil</button>
</div>

Watcher

Seperti nama nya, fitur ini melihat perubahan yg terjadi saat suatu aksi dilakukan. Kita akan menggunakan directive v-model yg berfungsi untuk menangkap nilai dari sebuah input.

app.js

let app = new Vue({
el: '#app',
data: {
	hasil: '',
	keterangan: ''
},
watch: {
	hasil: function(){
		this.keterangan = 'Sedang Mengetik'
	}
}
})

index.html

<div id="app">
    <h2>Hasil : {{ hasil }}</h2>
    <textarea v-model="hasil" id="" cols="30" rows="10"></textarea>
    <p>{{ keterangan }}</p>
</div>