I am struggling with Vue component re-rendering due to a problem related to consuming data from a Promise. The data is fetched and stored under the specific property chain (visualData.layout.cube...), where I assign values to DATA properties (such as label, indicatorValue, etc).
The issue is that the component does not re-render when the data within the Promise changes (e.g. when applying application filters or interacting with charts). The component's data only updates when switching routes or reloading the page.
What Vue solution can be used to monitor changes coming from the Promise?
data() {
return {
label: null,
indicatorState: null,
indicatorValue: null,
}
},
computed: {
isAppReady() {
return this.$store.getters.isAppReady;
},
},
mounted() {
this.$store.watch(() => this.isAppReady, (status) => {
if (status) { // if STATUS === true
this.getData();
}
});
if (this.isAppReady) {
this.getData();
}
},
methods: {
getData() {
return this.appMethods // global object gathering specific methods like .getObject, .getField etc.
.getObject(null, this.visualID)
.then(visualData => visualData.layout.cube.dataPages[0].matrix[0])
.then((transformedData) => {
this.label = transformedData[0].qText;
this.indicatorValue = transformedData[1].qText;
this.indicatorState = Number(transformedData[1].qNum) > 0;
});
},
},