Vue.js中如何将对象实例绑定到元素属性并在点击事件中直接获取？

这问题我太熟了！你完全不用绕弯子去搞data-*属性或者索引查找——Vue本身就给你提供了更直接的方式，直接把对象实例作为参数传给点击事件就行，绝对直观好用。

核心方案：在v-for循环中直接传递对象给点击方法 #

当你用v-for渲染<li>时，直接把当前循环的对象作为参数绑定到@click事件上，这样点击时就能直接拿到完整的对象实例，根本不需要额外查找。

举个完整的例子：

Vue 2选项式API写法

<template>
  <ul>
    <!-- 循环时把o直接传给click方法 -->
    <li v-for="o in objects" :key="o.id" @click="handleItemClick(o)">
      {{ o.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      objects: [
        { id: 1, name: '用户对象A', age: 25 },
        { id: 2, name: '用户对象B', age: 30 }
      ]
    };
  },
  methods: {
    handleItemClick(o) {
      // 这里直接拿到完整的o实例！
      console.log('点击的对象:', o);
      console.log('对象的属性:', o.name, o.age);
      // 直接做你需要的操作就行
    }
  }
};
</script>

Vue 3组合式API写法

如果你用的是Vue 3的<script setup>，写法更简洁：

<script setup>
import { ref } from 'vue';

const objects = ref([
  { id: 1, name: '用户对象A', age: 25 },
  { id: 2, name: '用户对象B', age: 30 }
]);

const handleItemClick = (o) => {
  console.log('点击的对象实例:', o);
  // 直接操作对象属性
};
</script>

<template>
  <ul>
    <li v-for="o in objects" :key="o.id" @click="handleItemClick(o)">
      {{ o.name }}
    </li>
  </ul>
</template>

为什么之前的方法不推荐？ #

你之前尝试用event.target.getAttribute("data-myObject")，本质上是因为HTML的data-*属性只能存储字符串类型——哪怕你把对象转成JSON字符串存进去，取出来还要用JSON.parse()解析，而且如果对象里包含循环引用、函数这类无法被JSON序列化的内容，这种方法直接就失效了，完全没必要给自己找麻烦。

而用索引查找this.$data.objects[index]虽然能解决问题，但代码可读性差，而且如果数组顺序发生变化，还可能出现匹配错误，远不如直接传递对象直观可靠。

额外补充：如果需要同时获取事件对象怎么办？ #

要是你既需要对象实例，又需要原生事件对象，只要在方法参数里同时写上就行：

<li v-for="o in objects" :key="o.id" @click="handleItemClick(o, $event)">
  {{ o.name }}
</li>

对应的方法：

handleItemClick(o, event) {
  console.log('对象实例:', o);
  console.log('原生事件:', event);
}

内容的提问来源于stack exchange，提问作者Ruudjah