How to pass multiple arguments in an inline event listener?

Question

I'm looping through a list of songs coming from a database with a button that deletes the song targetted

<div v-for="(song, index) of songs" :key="index">
  ...
  ...
  <button @click="deleteSong(song._id)">Delete</button>
</div>

then in the method

deleteSong(id) {
  axios.delete("/api/songs/" + id)
}

What I also want is to get the target event object in order to instantly delete the row without having to refresh the page

I tried @click="deleteSong(e, song._id)" and some other things but I always getundefined, any idea how to do that?

Keith Nicholas · Accepted Answer · 2021-02-03 00:06:52Z

1

to get to the underlying event you can use $event

answered Feb 3, 2021 at 0:06

Keith Nicholas

44.4k15 gold badges101 silver badges168 bronze badges

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

Comments

CertainPerformance · Accepted Answer · 2021-02-03 00:07:16Z

0

As the docs show, $event can be used to refer to the associated event:

<button @click="deleteSong(song._id, $event)">Delete</button>

answered Feb 3, 2021 at 0:07

373k55 gold badges354 silver badges359 bronze badges