1

I'm trying to use the pure Jquery Datatable with Vue, but the datatable don't recognize vue methods and don't compile vue components. I'm trying to use @click or v-on:click. Any idea?

My Index.vue file. When I click in second button, doesn't work @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();
    }


}

Draake
  • 93
  • 1
  • 16
  • You haven't defined a method named `sendToApproval`. Did you mean `sendForApproval`? – thanksd Mar 15 '18 at 18:28
  • Sorry, I writed wrong, the name is sendForApproval and are defined yes. – Draake Mar 15 '18 at 18:38
  • You cannot mix jQuery and Vue this way. You can't embed jQuery in Vue and then embed Vue in the jQuery. See https://stackoverflow.com/questions/43240789/make-vuejs-and-jquery-play-nice – Roy J Mar 15 '18 at 18:56

1 Answers1

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


    },
Maharudra Kekan
  • 1
  • 1