Добавьте кнопки действий в интерфейсе vue.js при использовании dataTables на стороне сервера

Question

Как добавить кнопки действий в frontend vue.js при использовании dataTables на стороне сервера?

Вот что у меня есть, этот код работает, но кнопки действий не дают запрос при нажатии. (оповещение также не стреляет). кнопки действий показывают и вызывают 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" : '<a href="#"   id="edit" data-tax="'+tax+'" class="btn btn-outline-warning m-btn m-btn--icon m-btn--icon-only m-btn--pill fd-edit-btn"><i class="fas fa-pen"></i></a>'
                    },
                    {
                        "targets": [ -1 ],
                        "data":"id",
                        "defaultContent" : '<a href="#" class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill fd-delete-btn" @click=deleteTaxGroup(tax_group)><i class="fas fa-trash"></i></a>'
                    }
                ],
            });
        })
        $('#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

Это вообще не использует Vue. Вы могли бы на самом деле более эффективно использовать Vue для динамической генерации этих таблиц и установки кнопок. Вы можете удалить тег Vue или повторно задать вопрос.