Vue.JS - invoking event listener

Question

I'm trying to make links inside <td> in the second column. When clicked, I want MonitoringTable function to be invoked with the value I supplied.

Vue.Js:

 const app = new Vue({
    el: '#page-wrapper',
    data: {
        loading: false,
        resultsTable: [],
        defaultTable: '*some name*',
        columnsFilter: ['*some name*','*some name*','*some name*']
    },
    methods: {
          /** Get Chosen Table Results From DB **/
          MonitoringTable: function(table) {
            var self = this;
            self.loading = true;

            /** Erase Previous Data From Table **/
            if ($.fn.DataTable.isDataTable('#monitoringTable')) {
                $('#monitoringTable').DataTable().destroy();
            }

            /** Get Data From DB **/
            Services.getMonitoringTable(table).then(function(response) {
                self.resultsTable = response.data;

                $('#monitoringTable thead tr').empty();
                $('#monitoringTable tbody').empty();

                if (self.resultsTable.length) {
                    /** Build Array of Table Heads **/
                    var columns = [];
                    $.each(self.resultsTable[0], function (index, value) {
                        columns.push({ data: index });
                        /** Append Filters to Table Heades **/
                        $('#monitoringTable thead tr').append(
                            '<th>' +
                            index +
                            ((self.columnsFilter.includes(index) )? '<select class="hidden"></select>' : '') +
                            '</th>');
                    });


                    /** Construct Table **/
                    setTimeout(function() {
                        Global.CustomTable('#monitoringTable', [ 0, 'asc' ], 25, false, response.data, columns, self);
                        $('#monitoringTable').find('[data-toggle="tooltip"]').tooltip('fixTitle');
                        if(table == self.defaultTable){
                            $.each(self.resultsTable, function (index, value) {
                                $('#monitoringTable tbody tr td.sorting_1').eq(index).next().html(
                                    `<a @click="MonitoringTable(` + *table's name* + `)" style="cursor: pointer;">` + *table's name* + '</a>');
                            });
                        }
                    }, 0);
                } else {
                    $('#monitoringTable thead tr').append('<th>Table results</th>');

                    /** Construct Table **/
                    setTimeout(function() {
                        Global.CustomTable('#monitoringTable');
                        $('#monitoringTable').find('[data-toggle="tooltip"]').tooltip('fixTitle');
                        self.loading = false;
                    }, 0);
                }
            }).catch(function(error) {
                var error = Object.assign({}, error);
                Global.ErrorMessages(error.response.data);
            });
        }
    },
    mounted: function() {
        var self = this;

        self.MonitoringTable(self.defaultTable);
        Global.ShowMounted();
    }
});

Element before mount:

@extends('*some name*')

@section('*some name*', '*some name*')
@section('*some name*', '*some name*')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <loading v-if="loading"></loading>
            <table id="monitoringTable" class="table table-bordered dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr></tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@stop

I added the HTML after table is constructed (with setTimeout). The view is as expected... what am I missing? How can I invoke MonitoringTable with a click?

Answer 1

You are mixing 2 paradigms - the Vue reactivity and the jQuery imperativity.

You can not use anything Vue-related in your jQuery-based code. You seem to think that @click will work in a string literal like <a @click which you are injecting into the DOM through jQuery - but it simply won't work because it is not part of any Vue-based template. You will have to either use an inline event handler (<a onclick="....") or use addEventListener to attach your handler after the A tag is already present in the DOM tree.

I highly recommend you to get rid of jQuery (and anything based on it) and switch completely to Vue.JS