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.

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Diperbarui 6 tahun yang lalu

8 Jawaban:

mumpung saya juga lagi mendalami vue js, saya buat latihan sekalian. ini hasilnya https://codepen.io/anon/pen/LyqgOv

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

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

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 6 tahun yang lalu

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.

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 6 tahun yang lalu

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.

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 6 tahun yang lalu



<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

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 6 tahun yang lalu

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

avatar rachmatsasongko
@rachmatsasongko

410 Kontribusi 426 Poin

Dipost 6 tahun yang lalu

@rachmatsasongko WAH SORRY GAN, belum ane cek hahaha maafkan kesalahan ane gan. wah mirip nih sama yang ane mau. thanks banget agan @rachmatsasongko

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 6 tahun yang lalu

Thanks agan @QaiserLab dan agan @rachmatsasongko Dah paham ane sekarang

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban