VueJS v-for access both parameters and event object on event

Question

Suppose I have nested elements that are repeated with v-for like this:

<div id="container">
    <div v-for="i in 3">
       <div v-for="j in 3" v-on:click="clicked(i,j)">
         {{i+','+j}}
       </div>
    </div>
</div>

And the corresponding Javascript:

var vm = new Vue({
   methods:{
    clicked:function(i, j){
        //How to access the click event here?
    }
   },
   el:'#container'
})

If I use v-on:click="clicked" I can access the event (and the corresponding element) in the clicked function. But I want to supply the parameters i and j, how can I both access them and the click event? I want to be able to do this regardless of event (keyup, keydown, blur, focus etc).

supply $event as a param inside clicked($event, i, j)

Deepak
– Deepak

2017-04-07 09:15:47 +00:00
Commented Apr 7, 2017 at 9:15 — Deepak
– Deepak, Commented Apr 7, 2017 at 9:15

Srinivas Damam · Accepted Answer · 2017-04-07 09:33:37Z

2

To access event object send $event as parameter, Vue will assign the event object if $event named parameter is found in event handlers.

<div v-for="j in 3" v-on:click="clicked(i, j, $event)">
 {{i+','+j}}
</div>

answered Apr 7, 2017 at 9:33

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS v-for access both parameters and event object on event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related