Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Solusi event Vue JS
<div id="app">
<div v-for="n in 10">
<p>URUTAN KE {{n}}</p>
<button v-on:click="ubahWarnaParagraf">TOMBOL</button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
ubahWarnaParagraf: function() {
// piye iki su
}
}
})
</script>
Gan gimana caranya kalo kyk gitu. jadi kan ntr ada 10 baris paragraf sama ada tombolnya, nah trus tiap tombol kalo dipencet cuma ngubah warna paragraf dibaris yg bersangkutan alias engga ngerubah di semua paragrafnya. ane dah nyoba2 make properti Data dan alhasil yg kerubah warna semua paragrafnya padahal yang di pencet tombol di paragraf ke 5 misalnya.
8 Jawaban:
mumpung saya juga lagi mendalami vue js, saya buat latihan sekalian. ini hasilnya https://codepen.io/anon/pen/LyqgOv
Yg di loop array object aja, misal tiap index array punya attribute color. Nty array tsb kan dilooping jadi per satuan object, nah disitu objectnya dipass sebagai parameter di ubahwarnaparagraf(objectsatuan). Jadi didalam method ubahwarnaparagraf tinggal objectsatuan.color = ... nah colornya ni di binding ke css style color si paragraf. Nanti berubah sesuai rownya kok, variable yg di pass ke parameter method yg dilooping tu pass by reference kynya
duh gk mudeng gan @QaiserLab
jadi kalo pake cara manual ane biasanya ngasih id ke tiap paragraf dan tombolnya trus bikin eventnya satu persatu, nah past belajar vue agak bingung gan.
jadi pas mau diubah misalnya,
saya klik tombol 2, maka yang berubah warna di paragraf ke 2 aja.
gini maksudnya gan
v-on:click="ubahWarnaParagraf(n)"
methods: {
ubahWarnaParagraf: function (n) {
n.color = 'blue';
}
}
yg di pass ke parameter objectnya aja, dia pass by reference. kalo isi object yg di pass itu di update valuenya yg di htmlnya juga ikut ke update.
<div id="app">
<div v-for="n in 10">
<p v-bind:style="ubahWarnaParagraf(n)">URUTAN KE {{n}}</p>
<button v-on:click="ubahWarnaParagraf(n)">TOMBOL {{n}}</button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
ubahWarnaParagraf: function(n) {
return n.color = 'blue'
}
}
})
</script>
masih bingung gan. tombol yang di klik tapi paragraf diatasnya yg berubah, maaf masih newbie ane gan hehe
Jawaban Terpilih
perhatikan yang di bilang agan @QaiserLab "Yg di loop array object aja, misal tiap index array punya attribute color".
jadi yang di loop bukan cuma sekedar number aja
<div v-for="n in 10">
mesti berupa object seperti ini
data: {
paragraph: [
{ no: '01', color: 'black' },
{ no: '02', color: 'black' },
{ no: '03', color: 'black' },
{ no: '04', color: 'black' },
{ no: '05', color: 'black' },
{ no: '06', color: 'black' },
{ no: '07', color: 'black' },
{ no: '08', color: 'black' },
{ no: '09', color: 'black' },
{ no: '10', color: 'black' }
]
}
dan di loop seperti ini
<div v-for="n in paragraph">
nah yang di passing ke methods itu object `n` nya.
lihat juga contoh link codepen di post saya yg pertama sebagai referensi
@rachmatsasongko WAH SORRY GAN, belum ane cek hahaha maafkan kesalahan ane gan. wah mirip nih sama yang ane mau. thanks banget agan @rachmatsasongko
Thanks agan @QaiserLab dan agan @rachmatsasongko Dah paham ane sekarang