Add action buttons in vue.js frontend when using server side dataTables - laravel

Question

How to add action buttons in frontend vue.js when using server side dataTables?
here is what i have so far, this code is working, but action buttons not give the request when clicking. (the alert is not also firing). the action buttons are showing and calling to editTaxGroup()
$(document).ready(function() {
let tax = 1;
self.dataTable = $("#tax_groups2").DataTable({
serverSide: true,
ajax: {
"columns": [
{ "data": "tax_group_name" },
{ "data": "country.country_name" },
{ "data": "tax_rate_percentage" },
{ "data": "Edit" },
{ "data": "Delete" }
],
data: {
"token": localStorage.getItem("token"),
},
url: 'api/v1/get-tax-groups',
dataFilter: function(data){
var json = jQuery.parseJSON( data );
json.recordsTotal = 100;
json.recordsFiltered = 100;
self.tax_groups = data.data;
return JSON.stringify( json ); // return JSON string
}
},
columns: [
{data: "tax_group_name"},
{data: "country.country_name",},
{data: "tax_rate_percentage"},
{data: "Edit"},
{data: "Delete"},
],
"columnDefs": [
{
"targets": [ -2 ],
"data":"id",
"defaultContent" : '<i class="fas fa-pen"></i>'
},
{
"targets": [ -1 ],
"data":"id",
"defaultContent" : '</i>'
}
],
});
})
$('#tax_groups2 tbody ').on('click', '#edit', function () {
for (let key in self.tax_groups){
alert(1)
console.log(key);
if(self.tax_groups.hasOwnProperty(key)){
console.log(`${self.tax_groups[key]}`)
}
}
} );
});
},

Answer 1

This isn't using Vue at all. You could actually more efficiently use Vue to generate these tables dynamically and set buttons as well. You may want to remove the Vue tag or re-ask the question.