[Vuejs]-JQuery Datatable don't recognize vue methods in render column

0👍

initDatatables() {
     **// New code added here
    // create new variable and assign this instance to it 
        let that = this;  //Now you can call any vue method via that variable.**

        this.dtPendents = $('#data-table-pendents').DataTable({
            "dom": '<frtp><"clearfix">',
            "ajax": '/v2/ajax/campaigns?status_id=5',
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json"
            },
            "columns": [
                {"data": "reference", "width": "5%"},
                {"data": "title"},
                {"data": "client_short_name"},
                {"data": "start_date", "width": "15%"},
                {"data": "end_date", "width": "15%"},
                {"data": "value", "width": "20%"},
                {
                    "data": "id",
                    "width": "20%",
                    "searchable": false,
                    "orderable": false,
                    "render": function (data, type, row) {
                        let html;

                        html = "<a data-toggle='tooltip' data-placement='top' title='Atualizar Campanha' href='/v2#/trade-marketing/campanha/" + data + "'><i class=\"zmdi zmdi-edit zmdi-hc-fw mdc-text-purple-700 zmdi-hc-2x\"></i></a>";

                        html += "<a data-toggle='tooltip' data-placement='top' title='Enviar Campanha p/ Aprovação' @click='sendForApproval(" + data + ")' href='javascript:void(0);'><i class='zmdi zmdi-long-arrow-tab zmdi-hc-fw mdc-text-green-700 zmdi-hc-2x'></i></a>";


                        return html;
                    }
                },
            ],
            drawCallback: function (settings) {
                var $element = $('#data-table-pendents');
                vm.$compile($element.get(0));
            },
        });


    },

Leave a comment