Vue中如何获取触发事件元素的key属性值？避免冗余赋值

Vue的key是框架内部用于跟踪节点身份的特殊属性，不会被渲染到最终的DOM元素上，所以没法直接通过event.target这类方式获取它的值。

你可以直接把循环中的key作为参数传递给点击函数，避免冗余绑定data-key：

<script setup>
function onButtonClick(key) {
  alert('Key: ' + key)
}
</script>

<template>
  <button @click="onButtonClick(key)" v-for="key in [1, 2, 3, 4]" :key="key">
    Get {{ key }}
  </button>
</template>

<style>
button {
  display: block; 
  margin-bottom: 5px;
}
</style>

如果你的循环项是对象（比如v-for="item in list"），也可以直接传递item.id这类作为key的字段，逻辑完全一致。

内容的提问来源于stack exchange，提问作者R.P. Pedraza