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.