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.
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.
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:
Check out the sample Vue 3 project for more examples with Flexmonster methods:
See the full list of Flexmonster methods.
There are two ways to subscribe to Flexmonster events:
You can also unsubscribe from an event.
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:
See the full list of Flexmonster events.
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:
Check out the full list of Flexmonster events.
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: