Search code examples
databasebuttonvuejs3

vue js using onclick event on datatable

currently I'm working on vue js 3, using simple-datatables

this's the codesandbox

it's a simple example, each time when I tried to use the button "details" don't work

function:

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

and on the HTML:

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

what's wrong??

Solution

  • lang="js" in your script tag is incorrect and unnecessary. The only time you need to specify lang is if you're using TypeScript. Removing this will remove the error you're currently facing.

    Once that is corrected, you're likely to run into import errors in DataTable.vue. Add this import to the top of your script setup:

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

    I also suggest moving the line import 'simple-datatables/src/css/style.css' also into <script setup>. There are few legitimate reasons to use both <script> and <script setup> and splitting imports is not one of them. Please just use <script setup> when possible.

    updated codesandbox