Q: how to track click event on rows? about vue-tables HOT 12 CLOSED

require('spark-bootstrap');

require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')]
});

require('./../spark-components/bootstrap');

require('./../my-app-components/bootstrap');

require('./home');

var VueTables = require('vue-tables');
Vue.use(VueTables.server, {
    compileTemplates: true,
    highlightMatches: true,
    filterByColumn: true,
    texts: {
        filter: "Search:",
        limit:'Per Page:'
    },
    datepickerOptions: {
        showDropdowns: true
    }
});
Vue.use(VueTables.client, {
    compileTemplates: true,
    highlightMatches: true,
    filterByColumn: true,
    texts: {
        filter: "Search:",
        limit:'Per Page:'
    },
    datepickerOptions: {
        showDropdowns: true
    }
});

<my-app-contacts
        :user="user"
        :contacts="contacts"
        inline-template>
    <div>
        <div v-if="user">
            <div id="people">
                <v-server-table url="{{ route('api.v1.contacts.index') }}" :columns="columns" :options="options"></v-server-table>
            </div>
        </div>
    </div>
</my-app-contacts>

module.exports = {

    props: ['user'],

    /**
     * Load mixins for the component.
     */
    mixins: [
        require('./../../mixins/crud'),
        require('./../../mixins/form'),
        require('./../../mixins/list'),
        require('./../../mixins/tabs')
    ],

    /**
     * The component's data.
     */
    data() {
        return {
            hash: 'contacts',
            columns: ['first_name','last_name','postal_address','postal_city','preferred_phone'
            ],
            options: {
                headings: {
                    first_name: 'First Name',
                    last_name: 'Last Name',
                    postal_address: 'Address',
                    postal_city: 'City',
                    preferred_phone: 'Phone',
                    actions: 'Actions'
                },
                templates: {
                    action: function (row) { return " <a href='javascript:void(0);' @click='$parent.editContact({row})'><i class='glyphicon glyphicon-edit'></i></a> <a href='javascript:void(0);' @click='$parent.approveContactDelete({row})'><i class='glyphicon glyphicon-erase'></i></a>"; }
                },
                columnsDisplay: {
                    postal_address: 'not_mobile',
                    actions: 'not_mobile'
                },
                onRowClick: function(row) {
                    $parent.view(row)
                }
            }
        };
    },

    events: {

        'vue-tables.loading': function (request) {
            console.log('vue-tables loading'); 
        },

        'vue-tables.loaded': function (response) {
            console.log('vue-tables loaded'); 
        }
    }

};