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和状态，但无法弄清楚如何获取它。在我的Vue代码的另一个函数中设置了dateEvent，因此使用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);
},

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

1 个答案: