We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Using methods and events

    This guide explains how to use Flexmonster methods and events in a Vue 2 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 2 application with Flexmonster embedded into it.
      If Flexmonster is not yet embedded, see Integration with Vue 2.

    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:

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

    ES6

    this.$refs.pivot.flexmonster.setReport(this.report);

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot)
    .setReport(this.report);

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

    <Pivot
      ref="pivot"
      toolbar
      v-bind:customizeCell="customizeCellFunction"
    />

    Such methods include:

    Check out the sample Vue 2 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:

    You can also unsubscribe from an event.

    Subscribing to an event via the <Pivot> props

    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"
      v-bind:reportcomplete="onReportComplete"
    />

    The event handler (in our case, onReportComplete) should be defined in the <script> section of the file.

    The sample Vue 2 project demonstrates how to subscribe to events via the component’s props:

    See the full list of Flexmonster events.

    Subscribing to an event via the on() method

    Use the previously created pivot ref to call the on() method:

    ES6

    this.$refs.pivot.flexmonster.on("reportcomplete", this.onReportComplete);

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot)
    .on("reportcomplete", this.onReportComplete);

    See how the on() method is used in the sample Vue 2 project:

    Check out the full list of Flexmonster events.

    Unsubscribing from an event

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

    ES6

    this.$refs.pivot.flexmonster.off("reportcomplete");

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot)
    .off("reportcomplete");

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

    ES6

    this.$refs.pivot.flexmonster.off("reportcomplete", this.onReportComplete);

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot)
    .off("reportcomplete", this.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 2 project:

    See also