QueryComplete in Vue 3.0

Hello, Jose,
 
Thank you for contacting us.
 
Please see the following code snipped of using the querycomplete event:

<template>

 <Pivot

   ref="pivot"

   toolbar

   v-bind:height="600"

   v-bind:report="'https://cdn.flexmonster.com/github/demo-report.json'"

   v-bind:querycomplete="queryCompleteHandler"

   _v-bind:licenseKey="'XXXX-XXXX-XXXX-XXXX-XXXX'">

 </Pivot>

</template>


<script>

 import Pivot from "./components/Pivot"


 export default {

   name: "App",

   methods: {

      queryCompleteHandler: function() {

          alert("querycomplete fired!");

      }

   },

   components: {

      Pivot

   }

 };

</script>

 
We hope it helps. You are welcome to write to us in case further questions arise.
 
Kind regards,
Nadia

Hello, Jose,
 
Thank you for your response.
 
Vue 3 provides both the Options API and Composition API approaches. Our sample project uses the Options API.
Please see a code snippet of calling a method using the Composition API:

<template>
<div>
<h3 class="page-title">Pivot Table Demo</h3>

<button class="button-red" @click="showColumnChart">Show Column Chart</button>
<button class="button-red" @click="showGrid">Show Grid</button>

<Pivot
  ref="pivot"
  toolbar
  v-bind:height="600"
  v-bind:report="'https://cdn.flexmonster.com/github/demo-report.json'"
  _v-bind:licenseKey="'XXXX-XXXX-XXXX-XXXX-XXXX'"></Pivot>

</div>
</template>


<script>

  import Pivot from "@/components/Pivot.vue";
  import { ref } from "vue";

  export default {
    name: "PivotTableDemo",
    setup() {
      let pivot = ref(null);

      function showColumnChart() {
         pivot.value.flexmonster.showCharts("column");
      }

      function showGrid() {
         pivot.value.flexmonster.showGrid();
      }

      return {
        pivot,
        showColumnChart,
        showGrid
      };
    },
    components: {
       Pivot
    },
  };

</script>

Vue 3.2 provides another way to use the Composition API - by adding the "setup" attribute in <script setup>. Here is how the code snippet above can be rewritten to use this approach:

<template>
<div>
<h3 class="page-title">Pivot Table Demo</h3>

<button class="button-red" @click="showColumnChart">Show Column Chart</button>
<button class="button-red" @click="showGrid">Show Grid</button>

<Pivot
ref="pivot"
toolbar
v-bind:height="600"
v-bind:report="'https://cdn.flexmonster.com/github/demo-report.json'"
_v-bind:licenseKey="'XXXX-XXXX-XXXX-XXXX-XXXX'"></Pivot>

</div>
</template>


<script setup>

import Pivot from "@/components/Pivot.vue";
import { ref } from "vue";

let pivot = ref(null);

function showColumnChart() {
   pivot.value.flexmonster.showCharts("column");
}

function showGrid() {
   pivot.value.flexmonster.showGrid();
}

</script>

Please let us know if it works for you. Feel free to contact us if other questions arise.
 
Kind regards,
Nadia

Hello, Jose,
 
Thank you for your feedback. We are happy to hear that it works well for you.
 
You are welcome to write to us if any other questions arise.
 
Kind regards,
Nadia