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>
pivot ref can be accessed through
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
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:
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:
See how the
off() method is used in the sample Vue 3 project.