We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

QueryComplete in Vue 3.0

Answered
Jose Antonio Veintimilla asked on October 21, 2021

Hello good afternoon.
Can you give me an example or tell me how to handle the QueryComplete event in Vue 3.0?

5 answers

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster October 22, 2021

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

Public
Jose Antonio Veintimilla October 25, 2021

Thank you very much for your solution.
Now I have the problem that in Vue 3 (composition api) I don't know, or can't, call methods.
According to your examples I must use this.$Refs but in composition api these calls are no longer used.
You can send me an example of how to call a method from vue 3 (composition api) or, even better, in vue 3.2
Thank you very much for your help.

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster October 25, 2021

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

Public
Jose Antonio Veintimilla October 25, 2021

Thank you very much for answering so quickly.
I already have it fixed.
You are a team of 10

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster October 26, 2021

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

Please login or Register to Submit Answer