Using methods and events

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.

Prerequisites

A Vue 3 application with Flexmonster embedded into it.
If Flexmonster is not yet embedded, see Integration with Vue 3.

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 and the useTemplateRef() helper:

ES6

<template>
  <Pivot
    ref="pivot"
    toolbar
  />
</template>

<script setup>
  import { useTemplateRef } from "vue";

  const pivot = useTemplateRef("pivot");
</script>

TypeScript

<template>
  <Pivot
    ref="pivot"
    toolbar
  />
</template>

<script setup lang="ts">
  import { useTemplateRef, Ref } from "vue";
  import Pivot from "vue-flexmonster/vue3";

  const pivot: Ref<typeof Pivot | null> = useTemplateRef("pivot");
</script>

The pivot reference to the <Pivot> instance is created.

In this guide, we will use the pivot.value.flexmonster property, which is a reference to the Flexmonster instance. The pivot.value.flexmonster gives you access to Flexmonster API.

Use methods

Call Flexmonster methods using the previously created pivot ref:

pivot.value.flexmonster.setReport(report);

Some methods can also be defined as <Pivot> props:

<Pivot
  ref="pivot"
  toolbar
  :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.

Use events

There are two ways to subscribe to Flexmonster events:

Via the <Pivot> props
Via the on() method

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

pivot.value.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.

Unsubscribing from an event

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

pivot.value.flexmonster.off("reportcomplete");

This will remove all handlers from the event. To remove a specific handler, pass its name as a second parameter to off():

pivot.value.flexmonster.off("reportcomplete", 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: