Need a special offer?Find out if your project fits.

Vue.js, updateData() kills ReportObject

Robert Nedelko asked on July 8, 2024


We work with Vue 3 composition api.
In this code we have:

  • ( data for pivot that we get from server )
  • watch( ( watch, if it change, start code inside )
  • pivotConfig our saved reportObject configuration in localStorage ( in this case only report.slice)

Our problem starts in watch(

  1. We start component. Selector is empty. Pivot is empty ( all is well )
  2. Change value in selector, we get data from server, watch( start else if (!report), we setReport(), pivot filled in with data and our report.slice
  3. Change value in selector ( where DATA comes empty ), we get empty data from server, watch( start if (report), code start .updateData. ( as described in the documentation .updateData(Helps to update data for the report without cleaning the report.) ). pivot filled in with empty data. ( And if we check slice settings, they become empty ( why ?) )
  4. Change value in selector, we get data from server, watch( start if (report), code start .updateData. And we see data with auto report.slice.

We have this problem only if get empty data from server.

if we always load ( not empty ) data, all work's fine. And don't delete our .slice

Is it bug ? Or wo don't understand something ?

Extra question. How to set globalObject ? Fox example globalObject.localization ?
Do we have something like gerReport() and setReport() for globalObject ?

Thank you for your reply.

<template> <Pivot ref="pivot" toolbar v-bind:licenseKey="'key'" /> </template> <script setup> import Pivot from "vue-flexmonster/vue3"; import "flexmonster/flexmonster.css"; import { ref, watch, defineProps, onMounted } from "vue"; let pivot = ref(); let pivotConfig = JSON.parse(localStorage.getItem("pivot-report-config")) || {}; // Define props const props = defineProps({ data: { type: Array, required: true, }, }); onMounted(() => { pivot.value.flexmonster.setReport({ localization: "/locale/flexmonster_lt.json", }); }); watch( () =>, (newData) => { const report = pivot.value.flexmonster.getReport(); if (report) { console.log("start1"); pivot.value.flexmonster.updateData({ data: newData }); } else if (!report) { console.log("start2"); pivot.value.flexmonster.setReport({ dataSource: { data: newData, }, slice: pivotConfig.slice, }); } }, { deep: true } ); </script>

4 answers

Solomiia Andrusiv Solomiia Andrusiv Flexmonster July 9, 2024

Hello, Robert!

Thank you for reaching out to us.

Kindly note that the slice in Flexmonster needs to know which fields would be present in the data source, and usually it takes these fields from the dataSource object. When the updated report.dataSource object is empty, the report.slice has no reference for the field names, so it clears itself and resets to the default one on the next update.

We recommend adding a mapping to your dataSource object to ensure the slice always knows which fields should be present in the data source, even if the current data is empty. You can read more about mapping in our guide:

Here is the JSFiddle to illustrate how Flexmonster with defined mapping handles the empty data update:

Hope you will find our answer helpful.

Kind regards,

Solomiia Andrusiv Solomiia Andrusiv Flexmonster 7 days ago

Hello, Robert!

Hope you are doing well.

Our team is wondering if you had some time to try updating empty data with defined mapping. Could you please let us know if the suggested approach was helpful?

Looking forward to hearing from you.

Kind regards,

Robert Nedelko 6 days ago

Hello, Solomiia!

Thank you for your reply.
Yes, your solution solved our problem and helped us to understand better how flexmonster works.

Solomiia Andrusiv Solomiia Andrusiv Flexmonster 5 days ago

Hello, Robert!

Thank you for your feedback.

We are glad to hear our answer was helpful.

Feel free to reach out to us if any other questions arise.

Kind regards,

Please login or Register to Submit Answer