Vue3集成simple-datatables时onclick调用方法报错：handleClickDetails未定义

问题根源 #

你误用了原生DOM的onclick属性，它的执行上下文是全局window对象，但Vue 3的<script setup>语法中定义的handleClickDetails函数属于组件的模块作用域，不会被挂载到全局window上，因此浏览器找不到该函数，抛出ReferenceError。这个问题和datatable组件本身无关，是原生事件绑定与Vue事件绑定的作用域差异导致的。

修复步骤 #

把原生onclick替换成Vue的@click指令，即可直接访问组件作用域内的函数，修改后的图标代码如下：

<i 
  class="iconify larger-icon" 
  data-icon="feather:info" 
  aria-hidden="true"
  @click="handleClickDetails(item.id)"
></i>

额外说明 #

• Vue的指令（如@click）会自动绑定到组件作用域，能直接访问<script setup>里定义的函数和变量。
• 除非明确需要将函数暴露到全局（不推荐），否则尽量避免在Vue模板中混用原生DOM事件属性。

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