VueJS - Antarmuka Reaktif
VueJS menyediakan opsi untuk menambahkan reaktivitas ke properti, yang ditambahkan secara dinamis. Pertimbangkan bahwa kita telah membuat instance vue dan perlu menambahkan properti jam tangan. Itu dapat dilakukan sebagai berikut -
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>Ada penghitung properti yang didefinisikan sebagai 1 dalam objek data. Penghitung bertambah saat kita mengklik tombol.
Instance Vue sudah dibuat. Untuk menambahkan arloji ke dalamnya, kita perlu melakukannya sebagai berikut -
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});Kita perlu menggunakan $ watch untuk menambahkan jam di luar vue instance. Ada peringatan ditambahkan, yang menunjukkan perubahan nilai untuk properti penghitung. Ada juga fungsi pengatur waktu yang ditambahkan, yaitu setTimeout, yang menetapkan nilai penghitung menjadi 20.
setTimeout(
function(){
vm.counter = 20;
},2000
);Setiap kali penghitung diubah, peringatan dari metode arloji akan diaktifkan seperti yang ditunjukkan pada tangkapan layar berikut.
VueJS tidak dapat mendeteksi penambahan dan penghapusan properti. Cara terbaik adalah selalu mendeklarasikan properti, yang harus reaktif dimuka dalam instance Vue. Jika kita perlu menambahkan properti pada waktu proses, kita dapat menggunakan metode Vue global, Vue.set, dan Vue.delete.
Vue.set
Metode ini membantu mengatur properti pada objek. Ini digunakan untuk mengatasi batasan bahwa Vue tidak dapat mendeteksi penambahan properti.
Sintaksis
Vue.set( target, key, value )Dimana,
target: Bisa berupa objek atau larik
kunci: Bisa berupa string atau angka
nilai: Bisa tipe apapun
Mari kita lihat contohnya.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Dalam contoh di atas, ada variabel myproduct yang dibuat di awal menggunakan potongan kode berikut.
var myproduct = {"id":1, name:"book", "price":"20.00"};Ini diberikan ke objek data dalam instance Vue sebagai berikut -
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});Pertimbangkan, kami ingin menambahkan satu properti lagi ke larik myproduct, setelah instance Vue dibuat. Itu dapat dilakukan sebagai berikut -
vm.products.qty = "1";Mari kita lihat hasilnya di konsol.
Seperti terlihat di atas, dalam produk kuantitas ditambahkan. Metode get / set, yang pada dasarnya menambahkan reaktivitas, tersedia untuk id, nama, dan harga, dan tidak tersedia untuk qty.
Kita tidak dapat mencapai reaktivitas hanya dengan menambahkan objek vue. VueJS sebagian besar ingin semua propertinya dibuat di awal. Namun, jika kita perlu menambahkannya nanti, kita bisa menggunakan Vue.set. Untuk ini, kita perlu menyetelnya menggunakan vue global, yaitu Vue.set.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Kami telah menggunakan Vue.set untuk menambahkan qty ke array menggunakan potongan kode berikut.
Vue.set(myproduct, 'qty', 1);Kami telah menghibur objek vue dan berikut ini adalah hasilnya.
Sekarang, kita bisa melihat get / set untuk qty ditambahkan menggunakan Vue.set.
Vue.delete
Fungsi ini digunakan untuk menghapus properti secara dinamis.
Contoh
Vue.delete( target, key )Dimana,
target: Bisa berupa objek atau larik
kunci: Bisa berupa string atau angka
Untuk menghapus properti apa pun, kita dapat menggunakan Vue.delete seperti pada kode berikut.
Contoh
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>Dalam contoh di atas, kami telah menggunakan Vue.delete untuk menghapus harga dari array menggunakan potongan kode berikut.
Vue.delete(myproduct, 'price');Berikut adalah outputnya, kita lihat di konsol.
Setelah penghapusan, kita hanya dapat melihat id dan nama saat harga dihapus. Kita juga dapat melihat bahwa metode get / set dihapus.