Q: how to track click event on rows?

[rusjoan]

Really want to smth like:

...
options: {
  onClick: (row) => { },
  ...
}

How to implement click event handler on row for now?
Thanks!

[matfish2]

The table template doesn't have a click event bound to the row.
I suppose you can either fork the repo and add it to your version, or use JQuery.
I might add it in the future if it turns out to be a common request.

[jonnywilliamson]

Just spent 10 mins looking for this feature in the docs too before discovering it here.

A +1 from me too thank you.

[matfish2]

Added onRowClick callback. See the options API.

[jonnywilliamson]

Thank you very much @matfish2 . That was much appreciated.

[jonnywilliamson]

Ok I'm probably just being silly but how can I access the vue instance in the onRowClick callback.

At the moment when I try - thisbecomes a window object, not the vue instance.

[matfish2]

Save the instance to a variable and replace this with the variable name:

var vm = new Vue({
options:{
    onRowClick:function(row){
    vm.crew = row.FMemeber['CP'];
    }
})

[jonnywilliamson]

Ahh.. OK thank you.

[rusjoan]

@matfish2 thanks! :)

[cloud9business]

I have
var app = new Vue({

app is undefined within the onRowClick callback. The vue-table is nested within a component and this.$parent and this.$root are also undefined within the callback. Any clues?.

I note that $parnet is also undefined within a column template.

[matfish2]

Can you paste the relevant HTML and JS?

[cloud9business]

app.js

require('spark-bootstrap');

require('./components/bootstrap');

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

coponents/bootstrap.js

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

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

require('./home');

my-app-components/bootstrap.js

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

HTML (A Laravel Blade template)

<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>

contacts.js

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

};

Note that in onRowClick and the action template this, this.$parent, $parent and app are all undefined. I also tried this.$dispatch but that is also undefined. The table seems to work in all other respects.

I can confirm that the vue-tables.loading and vue-tables.loaded events are being dispatched correctly form set-data.js. In set-data.js this is, correctly, an instance of VServerTable.

In my onRowClick function this is just a plain Object with all of the v-server properties like columnsDisplay and compileTemplates.

[matfish2]

When using a compiler like browserify or webpack the different modules are scoped and have no immediate access to other modules. You can either export your app variable and import it into contacts.js, or make contacts.js a function that accepts your app instance.