1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

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

    Use methods

    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.

    Use events

    There are two ways to subscribe to events:

    You can also unsubscribe from an event.

    Subscribing to events via the <Pivot> props

    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.

    Subscribing to events via the on() method

    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.

    Unsubscribing from 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.

    See also