Passing object values in vue button event

Question

In my Vue template, I'm currently setting response data to an object called dateEvents which is structured like this:

<tbody  v-for="dateEvent in dateEvents">
  <tr> 
    <td>{{ dateEvent.id }}</td>
    <td>{{ dateEvent.status }}</td>
    <td><button v-on:click="changeStatus" type="button" class=" taskButton btn-default"><a style="color:white;">Accept</a></button></td>
  </tr>
</tbody>

My data shows properly, and I'm calling a method/function with button click, and I can get the click to fire an event but not getting the value properly. I want to have access to the id and status of the clicked row's button within the method but can't figure out how to get it. dateEvent is being set in another function in my vue code so using this.dateEvents gets the base object but I need the specific data sent from the row that is clicked. Here's the vue code:

//vue code
methods: {
  changeStatus: function(event) {
    alert(this.dateEvents.status)
  },

David Weldon · Accepted Answer · 2019-08-28 18:47:24Z

3

You can pass arguments to the method. In the template:

<button @click="changeStatus(dateEvent)">

And in your method:

changeStatus: function(dateEvent) {
  console.log(dateEvent.status, dateEvent.id);
},

answered Aug 28, 2019 at 18:47

David Weldon

64.4k11 gold badges152 silver badges146 bronze badges

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

2 Comments

Geoff_S Over a year ago

So simple, I don't know why I didn't just pass it to the method to begin with. Thanks! Trying this now

David Weldon Over a year ago

Don't worry - it's a pretty common stumbling block when getting used to Vue's template system.

Collectives™ on Stack Overflow

Passing object values in vue button event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related