Vue3点击按钮打印user._id报错，如何正确输出user._id或user.it_name？

问题出在两个地方：

• 点击事件没有传递user参数给printName函数，导致函数内的user是undefined
• 错误使用了.value，如果users数组中的元素是普通对象（而非响应式ref对象），不需要加.value

修改后的代码： #

模板部分：

<td class="one-third column" v-for="user in users" :key="user._id">
  <div>   
    <v-btn @click="printName(user)" height="50" size="large" color="purple">
      {{ user.it_name.slice(0, 10) }}
    </v-btn>  
  </div>
</td>

脚本部分：

<script setup>
function printName(user) {
  // 直接访问属性即可，无需.value
  console.log(user._id);
  console.log(user.it_name);
}
</script>

说明： #

1. 在@click中明确传递当前循环的user对象给printName，这样函数才能拿到对应的用户数据
2. 如果你的user是通过ref或reactive创建的响应式对象，但在v-for遍历的是普通对象数组，直接访问属性就可以，只有单独的ref变量才需要用.value获取值

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