stop action events ?

[malaschitz]

I have vue-table with item-actions and with detail-row too.

When I click on button (item-action) both events are called. At first item-action and next is open detail-row. Is possible stop detail-row event ?

[ratiw]

@malaschitz I actually overlook this issue. This will be fixed in the next release. Probably through a new event vuetable:cell-clicked or something. I will have to think about that.

The work around at the moment is to add a CSS class (e.g. detail-toggle) to a specific column and filtered it in vuetable:row-clicked event and use it to broadcast the event to toggle the detail row.

To demonstrate the work-around using this example

    var tableColumns = [
        {
            name: 'id',
            title: '',
            dataClass: 'detail-toggle center aligned',  // <--- add "detail-toggle" class
            callback: 'showDetailRow'
        },
    //...

    new Vue({
        el: '#app',
        //...
        methods: {
            //...
            // add "detail-toggle" class to the icon as well
            showDetailRow: function(value) {
                var icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'down' : 'right'
                return [
                    '<a class="show-detail-row">',
                        '<i class="detail-toggle chevron circle ' + icon + ' icon"></i>',
                    '</a>'
                ].join('')
            },
            //...
        },
        events: {
            //..
            'vuetable:row-clicked': function(data, event) {
                // filter the clicked target to see if it contains 'detail-toggle' class
                if (event.target.classList.contains('detail-toggle')) {
                    this.$broadcast('vuetable:toggle-detail', data.id)
                }
            },
            //...
        }
    })

In this example, the detail row will only gets toggled when the user clicks on the id column or the icon on that column, so clicking the action button or any other column will not have side effect.

[malaschitz]

I suggest do not create a new event, but do not broadcast vuetable:row-clicked when is broadcast vuetable:action. Because I could broadcast event vuetable:row-clicked in my action when I will need it (but it is probably common).

Thanks for work around.

[ratiw]

I don't think that is possible. They are two separate events and are emitting independently from different DOM element.

Based on my initial test, a new event would solve this quite easily but I don't have time to look at it in more detail. It seems redundant, but I think each event would have its use when appropriate.

The good thing about the event model is that it is optional. You only register for the event(s) you're interested in and ignore everything else. The bad thing is you have to be more careful about the side effect.