CODEWITHSUNDEEP
javascriptvue.js
Geoff_S
Geoff_S

Reputation: 5107

Passing object values in vue button event

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)
  },

Upvotes: 0

Views: 1410

Answers (1)

David Weldon
David Weldon

Reputation: 64312

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);
},

Upvotes: 3

Related Questions