☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
Connecting to data source

Using methods and events

This guide explains how to use Flexmonster methods and events in a Vue 2 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 2 application with Flexmonster embedded into it.
    If Flexmonster is not yet embedded, see Integration with Vue 2.

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:

ES6

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

TypeScript

((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:

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

See the full list of Flexmonster methods.

Use events

There are two ways to subscribe to Flexmonster events:

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 2 project demonstrates how to subscribe to events via the component’s props:

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:

ES6

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

TypeScript

((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 2 project:

Check out the full list of Flexmonster events.

Unsubscribing from an event

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

ES6

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

TypeScript

((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():

ES6

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

TypeScript

((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 2 project:

See also