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

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

GeVi85GeVi85 Posts: 2Questions: 1Answers: 0

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>

Answers

  • colincolin Posts: 15,226Questions: 1Answers: 2,593

    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

Sign In or Register to comment.