vue js 在数据表上使用 onclick 事件

Question

目前我正在开发 vue js 3，使用 simple-datatables

这是codesandbox

这是一个简单的例子，每次我尝试使用“详细信息”按钮时都不起作用

功能：

const handleClickDetails = () => {  
  console.log("Here....... ");
  alert("Here!");
};

在 HTML 上：

          <tr>
            <td  class="td-action"> 
              <button @click="handleClickDetails"> Detalles </button>
            </td>
            <td scope="col"> name 1 </td>
          </tr>

怎么了？？

Answer 1

脚本标签中的

lang="js"

不正确且不必要。只有在使用 TypeScript 时才需要指定 lang。删除此项将消除您当前面临的错误。

纠正此问题后，您可能会在 DataTable.vue 中遇到导入错误。将此导入添加到脚本设置的顶部：

import { ref, reactive, onMounted, onBeforeUnmount, isReactive, watch } from 'vue'

我还建议将线

import 'simple-datatables/src/css/style.css'

也移至

<script setup>

。同时使用 <script> 和

<script setup>

的

合法理由

很少，而拆分导入不是其中之一。请尽可能使用

<script setup>

。

更新了代码和框