vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

要实现"vue v-for 点击当前行，获取当前行数据及 event 当前事件对象"的需求，主要分为两个步骤：

使用 v-for 渲染数据列表，绑定点击事件，处理点击事件传递参数。
通过点击事件获取当前行数据及事件对象。

下面是详细的攻略：

1. 使用 v-for 渲染列表，绑定点击事件处理参数传递

在 Vue 中使用 v-for 渲染列表非常常见。要获取当前行数据，可以给每一行绑定一个点击事件，在点击事件中传递当前行的数据以及事件对象。下面是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="item.id" @click="handleClick(item, $event)">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.email}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {id: 1, name: 'Alice', age: 20, email: 'alice@example.com'},
        {id: 2, name: 'Bob', age: 22, email: 'bob@example.com'},
        {id: 3, name: 'Charlie', age: 25, email: 'charlie@example.com'},
      ]
    }
  },
  methods: {
    handleClick (item, event) {
      console.log(item) // 当前行的数据
      console.log(event) // 当前事件对象
    }
  }
}
</script>

在以上代码中，我们给每一行绑定了一个 @click 事件，通过 $event 参数传递事件对象，通过 item 参数传递当前行的数据。

2. 通过点击事件获取当前行数据及事件对象

在点击事件处理函数中，我们可以通过参数获取当前行的数据以及事件对象。下面是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="item.id" @click="handleClick(item, $event)">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.email}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {id: 1, name: 'Alice', age: 20, email: 'alice@example.com'},
        {id: 2, name: 'Bob', age: 22, email: 'bob@example.com'},
        {id: 3, name: 'Charlie', age: 25, email: 'charlie@example.com'},
      ]
    }
  },
  methods: {
    handleClick (item, event) {
      console.log(item) // 当前行的数据
      console.log(event) // 当前事件对象
      console.log(event.target) // 当前点击的元素
      console.log(event.currentTarget) // 当前绑定事件的元素
    }
  }
}
</script>

以上代码中，在点击事件处理函数中，我们可以直接访问传入的 item 参数获取当前行的数据，也可以通过 $event 参数获取当前事件对象。在事件对象中，我们可以通过 target 属性获取当前鼠标点击的元素，也可以通过 currentTarget 属性获取当前绑定事件的元素。

总结：通过以上两个步骤，我们可以成功实现通过 v-for 渲染列表，绑定点击事件，获取当前行数据及事件对象的需求。在实际开发中，需要注意的是，如果使用了其他库或框架，可能需要采用不同的方法获取事件对象。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作 - Python技术站