javascript - 在vue按钮事件中传递对象值

Question

在我的 Vue 模板中，我当前正在将响应数据设置为名为 dateEvents 的对象，其结构如下:

<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>

我的数据显示正确，并且我正在通过单击按钮调用方法/函数，并且我可以通过单击来触发事件，但无法正确获取值。我想访问方法中单击的行按钮的 ID 和状态，但不知道如何获取它。 dateEvent 是在我的 vue 代码中的另一个函数中设置的，因此使用 this.dateEvents 获取基本对象，但我需要从单击的行发送的特定数据。这是 vue 代码:

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

Answer 1

您可以将参数传递给该方法。在模板中:

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

在你的方法中:

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