Events

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

  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.

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

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