pass index to child event listener in parent component in vuejs

Question

I have a list of objects within a v-for loop:

<div v-for="(element, index) in myArray">
    <child @event-fired="handleEvent(index, dataFromChild)"></child>
</div>

Now I want once the event is fired from the child component, on my handleEvent method, pass the index and the data from the child component.

But now, if I do something like stated above,I get an error on console stating, property or method dataFromChild is not defined....

FYI, camel-cased event names are often difficult to work with. Vue recommends using kebab-cased, ie @event-fired — Phil
– Phil, Commented May 27, 2019 at 1:42

Phil · Accepted Answer · 2019-05-27 01:50:50Z

4

You can bind an arrow function expression in your event handler. For example

<child @event-fired="dataFromChild => handleEvent(index, dataFromChild)"/>

JSFiddle demo (from the Vue boilerplate) ~ https://jsfiddle.net/zmxksv35/

answered May 27, 2019 at 1:50

Phil

166k25 gold badges265 silver badges269 bronze badges

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

Comments

cHaWe · Accepted Answer · 2021-10-16 23:19:23Z

0

You can pass the event and the index in the event listener.

<child @event-fired="handleEvent($event,index)"/>

answered Oct 16, 2021 at 23:19

cHaWe

1

laptou · Accepted Answer · 2019-05-27 01:59:12Z

-1

Just pass everything into your event handler as a single object.

<div v-for="(element, index) in myArray">
    <child @event-fired="data => handleEvent({ index, data })"></child>
</div>

Then, in your event handler, you can destructure it:

handleEvent({ index, data }) {
    // handle the event
}

answered May 27, 2019 at 1:47

laptou

7,1073 gold badges34 silver badges69 bronze badges

@Johhn Ah, I misunderstood what dataFromChild represents.