How to catch event of action buttons on row with Vue3?

GeVi85

Hi, i need to catch when the user click on an action buton on the row, to edit or delete, i see others answers but they are using just JS, the dificult of this is i'm using Vue3, here part of the code...

<script setup>

import AppLayout from '@/Layouts/AppLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';


import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net-bs5';
import 'datatables.net-select';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.html5';
// import language from 'datatables.net-plugins/i18n/es-MX.mjs';
import language from '@/Common/DataTable/languages.js';
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import { onMounted } from 'vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
DataTable.use(DataTablesLib);

defineProps({
    tipotransportes: {
        type: Object,
        required: true
    }
});

const columns = [

    { data: 'id', title: 'id', visible: false },
    { data: 'nombre', title: 'NOMBRE' },
    { data: 'clave', title: 'CLAVE' },
    { data: 'descripcion', title: 'DESCRIPCIÓN' },
    { data: 'bascula', title: 'BÁSCULA' },
    { data: 'puertas', title: '# PUERTAS' },
    { data: 'cap_maxima', title: 'CAPACIDAD MÁXIMA' },
    { data: 'created_at', title: 'created_at', visible: false },
    { data: 'updated_at', title: 'updated_at', visible: false },
    { data: 'created_by', title: 'created_by', visible: false },
    { data: 'updated_by', title: 'updated_by', visible: false },
    { data: 'deleted_by', title: 'deleted_by', visible: false },
    { data: 'deleted_at', title: 'deleted_at', visible: false },
    {
        data: '',
        title: 'Acciones',
        render: (data) => {
            return `<button @click="handleClick()" class="btn btn-editar btn-light btn-icon waves-effect" type="button"><i class="mdi mdi-pencil"></i></button>
            <button @click="handleClick()" class="btn btn-eliminar btn-danger btn-icon waves-effect" type="button"><i class="mdi mdi-trash-can"></i></button>`;
        }
    }

];

const options = {
    language,
    responsive: true,
    select: true,
    searchPanes: {
        layout: 'columns-3'
    },
    layout: {
        bottomStart: 'pageLength',
        topStart: null,
        topEnd: {
            search:
            {
                display: "inline-flex",
            }
            , buttons: [
                {
                    text: '<i class="mdi mdi-download"></i> Excel',
                    className: 'btn btn-outline-primary btn-border custom-toggle',

                },
                {
                    text: '<i class="mdi mdi-plus"></i> Agregar',
                    className: 'btn btn-primary ',
                    action: function () {
                        alert("Abrir modal de crear");
                    }
                }
            ],


        }
    },
    pagingType: 'simple_numbers',
    initComplete: function () {
        // Aquí eliminamos las clases predeterminadas y agregamos las personalizadas
        const buttons = document.querySelectorAll('.dt-buttons .btn');
        buttons.forEach(button => {
            button.classList.remove('dt-button', 'buttons-excel', 'buttons-html5');
            // Aquí puedes agregar cualquier otra clase personalizada si es necesario
        });
        //const buttons_editar = document.querySelectorAll('.btn-editar');
        //buttons_editar.forEach(button => {
        //    // console.log(button);
        //    button.click(function () {
        //        alert("QQQ");
        //        console.log($(this));
        //        var row = $(this).closest('tr');
        //
        //        var data = table.row(row).data().name;
        //        console.log(data);
        //    });
        //    // Aquí puedes agregar cualquier otra clase personalizada si es necesario
        //});

        function handleClick(table) {


            //for row data
            console.log(table.row($(this).parents('tr')[0]).data().id);

        }

    },


}


</script>


<template>

    <Head title="Tipos de Transporte"></Head>
    <AppLayout title="Tipos de Transporte">
        <div class="py-12">
            <DataTable :data="tipotransportes" :options="options" :columns="columns" class="table table-hover " width="100%">

            </DataTable>
        </div>
    </AppLayout>
</template>

colin

This example may help - it's showing how to get the text out of a clicked cell. You can get the full row with api.row(this),

Colin