JQuery Datatable 无法识别渲染列中的 vue 方法

Question

我正在尝试将纯 Jquery 数据表与 Vue 一起使用，但数据表不识别 vue 方法，也不编译 vue 组件。我正在尝试使用@click 或 v-on:click。有什么想法吗？

我的 Index.vue 文件。当我点击第二个按钮时，@click="sendForApproval()"

不起作用

<script>

export default {
    data() {
        return {
            listPendents: {},
        }
    },

    methods: {
        sendForApproval(id) {
            console.log('Hey!' + id);
        },
        initDatatables() {

            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));
                },
            });


        },

    },
    mounted() {
        this.initDatatables();
    }


}

Answer 1

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));
            },
        });


    },