Events

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.

• vuetable:action

  This event will be dispatched up the parent chain when the user click on any item action defined in the 'item-actions' property.

  arguments: The action's name and the item data will be passed as the event arguments.

• vuetable:loading

  This event will be dispatched up the parent chain before vuetable starts to request the data from the server. This is useful for start displaying the loading image.

  arguments: This event does not pass any argument.

• vuetable:load-success

  This event will be dispatched up the parent chain as well as broadcast down the children chain when vuetable has successfully got the data back from the server.

  arguments:

  • When load-success event is dispatched, the table data and pagination will already be set. The whole response will be passed as the event argument.
  • When load-success event is broadcasted, table pagination info will be passed as the event argument.

• vuetable:load-error

  This event will be dispatched up the parent chain as well as broadcast down the children chain when vuetable has received failed response from the server.

  arguments:

  • When load-error event is dispatched and broadcasted, the response from the server will be passed as the event argument.

• vuetable:loaded

  This event will be dispatched up the parent chain 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 fnished and it got the response back.

  This is useful for ending/hiding the loading image.

  arguments: This event does not pass any argument.

• vuetable:reload

  Main Vue.js instance can $broadcast this event, to force vuetable to reload the data from the server using the current parameters. The page number will stay the same.

  arguments: This event does not require any argument.

• vuetable:refresh

  Main Vue.js instance can $broadcast this event, to 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.

  arguments: This event does not require any argument.

• vuetable:goto-page

  You can programmatically tell vuetable to jump to the previous (prev), next (next), or a specific page number using this event.

  arguments: This event requires the page number as an argument. The page number can be any valid page number, and either prev for previous page or next for next page.

• vuetable:row-changed

  This event will be dispatched up during vuetable loops through the data during 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

*arguments:* The event pass the current data item as the argument.

• vuetable:row-clicked

  This event will be dispatched up 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.

*arguments:* The event pass the current data item and the event object as arguments.

• vuetable:cell-dblclicked

  The event will be dispatched up when the user double-clicked on any column that is not a special column. It should basically work like vuetable:row-clicked event. The only difference be that the field definition of the given column is also passed in the arguments. You could use this event to trigger other components, as double-clicking the given cell might indicate an intension to do something. See this example to demonstrate calling vue-editable for inline editing.

  arguments: The event pass the current data item, field definition of the column, and the event object as arguments.

• vuetable:set-options

  You can use broadcast this event to vuetable to programmatically set its 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"
  	    })
  	},
  })

  arguments: This event accepts an object as a argument. The object should have prop name and value that it wants to be set.

• vuetable-pagination:change-page

  This event will be dispatched up the chain from vuetable-pagination component when the user click on vuetable-pagination component to request for the page change.

  This allows vuetable to trigger a new data request from the server.

  If you make a new vuetable-pagination component, you must use this event to notify vuetable to allow it to handle the action.

  arguments: This event pass the new page number/phrase as the event argument.

• vuetable-pagination:set-options

  You can use broadcast this event to pagination component to programmatically set its props from the main Vue instance.

  this.$broadcast('vuetable-pagination:set-options', { linkClass: 'btn btn-default' }) 

  arguments: This event accepts an object as a argument. The object should have prop name and value that it wants to be set.