Skip to content

Events

Jump to bottom
Rati Wannapanop edited this page Jul 30, 2016 · 9 revisions

vuetable uses events to communicate with its parent (Vue.js instance) and its pagination child component. This allows the parent Vue.js instance and pagination component to tap into those events to modify the behavior of vuetable with ease. It also exposes some events that allow the main Vue.js instance to control it via those events.

Please note the type of event below. The dispatch ones mean vuetable itself triggers the events while listen means it listens to those events from the current vm.

# vuetable:action

  • Type: dispatch

  • Arguments:

    • {String} name -- name of the action defined in item-actions prop
    • {Object} data -- the data item of that row.

  • Usage:

    This event will be triggered when the user click on any item action defined in the 'item-actions' property.

# vuetable:loading

  • Type: dispatch

  • Arguments: none

  • Usage:

    This event will be triggered before vuetable starts to request the data from the server. This is useful for triggering the display of loading image.

# vuetable:load-success

  • Type: dispatch

  • Arguments:

    • {Object} response -- the response returned from the server

  • Usage:

    This event will be triggered when the data was successfully loaded from the server.

# vuetable:load-error

  • Type: dispatch

  • Arguments:

    • {Object} response -- the response returned from the server

  • Usage:

    This event will be triggered when up the data cannot be retrieved from the server or the server responses with an error.

# vuetable:loaded

  • Type: dispatch

  • Arguments: none

  • Usage:

    This event will be triggered after vuetable got response back from the server. This event does not indicate whether the request was successful or failed. It just indicates that the request is finished and it got the response back.

    This is useful for ending/hiding the loading image.

# vuetable:reload

  • Type: listen

  • Arguments: none

  • Usage:

    This event will force vuetable to reload the data from the server using the current value of parameters. However, the page number will not be reset.

# vuetable:refresh

  • Type: listen

  • Arguments: none

  • Usage:

    This event will force vuetable to reload the data from the server and the page number will be reset to 1. It's the same as using goto-page page event to load page 1.

# vuetable:goto-page

  • Type: listen

  • Arguments:

    • {String} page -- the target page number, prev, or next

  • Usage:

    This event will tell vuetable to jump to the previous (prev), next (next), or a specific page number.

# vuetable:row-changed

  • Type: dispatch

  • Arguments:

    • {Object} data -- the currect data item

  • Usage:

    This event will be triggered when vuetable loops through the data during table row rendering. This will be useful if you want to do some processing with the data, e.g. summing up the values.

    Important! Please note that you MUST NOT change the pass-in data item or try to update any instance data during this event, or it will cause "indefinite update loop". The only way to work inside this event is to use the variable define outside of Vue.js instance

# vuetable:row-clicked

  • Type: dispatch

  • Arguments:

    • {Object} data -- the currect data item
    • {Object} event -- the MouseObject event

  • Usage:

    This event will be triggered when the user clicked on any column in the row. You can use the pass-in event object to target the DOM element that you want to manipulate. The pass-in data item argument is the actual data that vuetable received from the server and it is reactived. Which means if you changed its value, the data displayed in the table will also be changed.

    Changing the pass-in data in this event will not cause "indefinite update loop" However, the change only affects the current displaying data. It does not change anything on the server side.

# vuetable:cell-clicked (v.1.2.1)

  • Type: dispatch

  • Arguments:

    • {Object} data -- the currect data item
    • {Object} field -- the field object that causes this event
    • {Object} event -- the MouseObject event

  • Usage:

    This event will be triggered when a cell in the tabel body has been clicked.

# vuetable:cell-dblclicked

  • Type: dispatch

  • Arguments:

    • {Object} data -- the currect data item
    • {Object} field -- the field object that causes this event
    • {Object} event -- the MouseObject event

  • Usage:

    This event will be triggered when a cell in the table body has been double-clicked.

# vuetable:detail-row-clicked (v.1.2.0)

  • Type: dispatch

  • Arguments:

    • {Object} data -- the currect data item
    • {Object} event -- the MouseObject event

  • Usage:

    This event will be triggered when an area of detail row has been clicked.

# vuetable:set-options

  • Type: listen

  • Arguments:

    • {Object} options -- object containing prop names and their associated values

  • Usage:

    Use this event to programmatically set to vuetable's props from the main Vue instance.

    new Vue({
	ready: function() {
    	this.$broadcast('vuetable:set-options', {
        	'tableClass' : "table table-bordered table-striped table-hover",
        	'ascendingIcon' : "glyphicon glyphicon-chevron-up",
            'descendingIcon' : "glyphicon glyphicon-chevron-down"
	    })
	},
})

# vuetable-pagination:change-page

  • Type: listen

  • Arguments:

    • {String} page -- the target page number, prev, or next

  • Usage:

    The same as vuetable:goto-page event.

Table of Contents

Clone this wiki locally