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> element. 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);
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 events:
You can also unsubscribe from an event.
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 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", 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");
See how the off() method is used in the sample Vue 3 project.