Using methods and events

This guide explains how to use Flexmonster methods and events in a Vue 3 application. First, we will get a reference to the Flexmonster instance. Then we will use this reference to call methods and subscribe to events.

Prerequisites

• A Vue 3 application with Flexmonster embedded into it.
  If Flexmonster is not yet embedded, see Integration with Vue 3.

Get a reference to the Flexmonster instance

To interact with Flexmonster through code, you need a reference to the <Pivot> instance. Get the reference using the ref attribute:

<template>
  <Pivot
    ref="pivot"
    toolbar
  />
</template>

The pivot ref can be accessed through this.$refs.

In this guide, we will use the pivot.flexmonster property, which is a reference to the Flexmonster instance. The pivot.flexmonster gives you access to Flexmonster API.

Use methods

Call Flexmonster methods using the previously created pivot ref:

this.$refs.pivot.flexmonster.setReport(this.report);

((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot)
.setReport(this.report);

Some methods can also be defined as <Pivot> props:

<Pivot
  ref="pivot"
  toolbar
  v-bind:customizeCell="customizeCellFunction"
/>

Such methods include:

• customizeAPIRequest
• customizeCell
• customizeChartElement
• customizeContextMenu
• sortFieldsList

Check out the sample Vue 3 project for more examples with Flexmonster methods:

• Vue 3 + ES6
• Vue 3 + TypeScript

See the full list of Flexmonster methods.

Use events

There are two ways to subscribe to Flexmonster events:

• Via the <Pivot> props
• Via the on() method

You can also unsubscribe from an event.

Subscribing to an event via the <Pivot> props

Using the v-bind directive, define an event as the <Pivot> prop and assign an event handler to it:

<Pivot
  report="https://cdn.flexmonster.com/reports/report.json"
  v-bind:reportcomplete="onReportComplete"
/>

The event handler (in our case, onReportComplete) should be defined in the <script> section of the file.

The sample Vue 3 project demonstrates how to subscribe to events via the component’s props:

• Vue 3 + ES6
• Vue 3 + TypeScript

See the full list of Flexmonster events.

Subscribing to an event via the on() method

Use the previously created pivot ref to call the on() method:

this.$refs.pivot.flexmonster.on("reportcomplete", this.onReportComplete);

((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot)
.on("reportcomplete", this.onReportComplete);

See how the on() method is used in the sample Vue 3 project:

• Vue 3 + ES6
• Vue 3 + TypeScript

Check out the full list of Flexmonster events.

Unsubscribing from an event

Use the off() method to unsubscribe from an event:

this.$refs.pivot.flexmonster.off("reportcomplete");

((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot)
.off("reportcomplete");

This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off():

this.$refs.pivot.flexmonster.off("reportcomplete", this.onReportComplete);

((this.$refs.pivot as typeof Pivot)
.flexmonster as Flexmonster.Pivot)
.off("reportcomplete", this.onReportComplete);

Note If a handler is specified as an anonymous function, you can remove it only by removing all handlers.

See how the off() method is used in the sample Vue 3 project:

• Vue 3 + ES6
• Vue 3 + TypeScript

See also

• Flexmonster methods
• Flexmonster events
• Usage examples
• About the <Pivot> component