How to populate an array BEFORE mounted lifecycle hook - vue.js

Question

I have a simple API call in getFeedingsAgain. I am calling it inside "beforeMount" yet I can see via my console.logs that my data value for "catFeedingsAgain" stays empty once "mounted" is called. I am trying to populate the catFeedingsAgain array BEFORE the component's "mounted()" lifecycle hook is called so a function I have inside the "mounted()" hook can use that array data. How can I make this work?
Thank you for your time.
UPDATED: including entire component code now.
NOTE: I am basically trying to replace the initial array within Amcharts...Line Chart #2...."dataProvider" with the resultant array from the API call in getFeedingsAgain.
```
<template>
<!-- second chart group -->
<div class="chart-block" style="padding-top:50px">
{{ message }}
<div ref="line" style="vertical-align: middle; display: inline-block; width: 50%; height: 30px;"></div>
<div ref="column" style="vertical-align: middle;display: inline-block; width: 50%; height: 30px;"></div>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: ['message'],
name: 'app',
computed:{
},
created(){
this.getFeedingsAgain(this.message);
},
data() {
return {
chartCatID: this.message,
catFeedingsAgain: [],
catMedicationsAgain: [],
}
},
mounted () {
/**
* Line Chart #2
*/
// this.getFeedingsAgain(this.message);
console.log("mounted");
console.log(this.catFeedingsAgain);
// TODO: line = weight(waf) / day(created?)
AmCharts.makeChart( this.$refs.line, {
"type": "serial",
"dataProvider": [ {
"day": 1,
"weight_after_food": 120
}, {
"day": 2,
"weight_after_food": 54
}, {
"day": 3,
"weight_after_food": -18
}, {
"day": 4,
"weight_after_food": -12
}, {
"day": 5,
"weight_after_food": -51
}, {
"day": 6,
"weight_after_food": 12
}, {
"day": 7,
"weight_after_food": 56
}, {
"day": 8,
"weight_after_food": 113
}, {
"day": 9,
"weight_after_food": 142
}, {
"day": 10,
"weight_after_food": 125
} ],
"categoryField": "day",
"autoMargins": false,
"marginLeft": 0,
"marginRight": 5,
"marginTop": 0,
"marginBottom": 0,
"graphs": [ {
"valueField": "weight_after_food",
"showBalloon": false,
"lineColor": "#ffbf63",
"negativeLineColor": "#289eaf"
} ],
"valueAxes": [ {
"gridAlpha": 0,
"axisAlpha": 0,
"guides": [ {
"weight_after_food": 0,
"lineAlpha": 0.1
} ]
} ],
"categoryAxis": {
"gridAlpha": 0,
"axisAlpha": 0,
"startOnAxis": true
}
} );
/**
* Column Chart #2
*/
// TODO: column = dose(dosage) / day(created?)
AmCharts.makeChart( this.$refs.column, {
"type": "serial",
"dataProvider": [ {
"day": 1,
"value": -5
}, {
"day": 2,
"value": 3
}, {
"day": 3,
"value": 7
}, {
"day": 4,
"value": -3
}, {
"day": 5,
"value": 3
}, {
"day": 6,
"value": 4
}, {
"day": 7,
"value": 6
}, {
"day": 8,
"value": -3
}, {
"day": 9,
"value": -2
}, {
"day": 10,
"value": 6
} ],
"categoryField": "day",
"autoMargins": false,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"marginBottom": 0,
"graphs": [ {
"valueField": "value",
"type": "column",
"fillAlphas": 1,
"showBalloon": false,
"lineColor": "#ffbf63",
"negativeFillColors": "#289eaf",
"negativeLineColor": "#289eaf"
} ],
"valueAxes": [ {
"gridAlpha": 0,
"axisAlpha": 0
} ],
"categoryAxis": {
"gridAlpha": 0,
"axisAlpha": 0
}
} );
},
methods:{
getFeedingsAgain(value) {
axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
.then(response => {
console.log("getFeedingsAgain: ");
console.log(response.data.results);
this.catFeedingsAgain = response.data.results
})
.catch(error => console.log(error));
},
getMedicationsAgain(value) {
axios.get(`${process.env.KITTY_URL}/api/v1/medications/?cat__slug=&cat__name=${value}`)
.then(response => {console.log("catMedications: ");console.log(response.data.results); this.catMedications = response.data.results})
.catch(error => console.log(error));
},
}
}
</script>
<style>
.amcharts-chart-div a{
text-indent: -9999px;
outline: none;
}
</style>
```

Answer 1

You could also create a watcher, to perform an action when the variable changes.
something like this
watch: {
catFeedingsAgain: function() {
AmCharts.makeChart( this.$refs.line, {
"type": "serial",
"dataProvider": this.catFeedingsAgain,
...
});
}
},
you can find the documentation here; https://v2.vuejs.org/v2/guide/computed.html#Watchers

Answer 2

First, you should not use beforeMount() method. Avoid it as much as you can. Instead use created() life-cycle method:
created() {
this.getFeedingsAgain(this.message);
}
Second, you want to populate an array before mounted is called. But since your data is being loaded from API asynchronously, you cannot do that. You cannot stop/pause mounted event from happening. Vue.js doesn't know when API response will be available. It could take 2 seconds, 3 seconds or simply fail.
The only option you have is to use v-if in your template. As long as your array length is zero, you can hide DOM elements or show loading progress bar.
First, you should not use beforeMount() method. Avoid it as much as you can. Instead use created() life-cycle method:
created() {
this.getFeedingsAgain(this.message);
}
Second, you want to populate an array before mounted is called. But since your data is being loaded from API asynchronously, you cannot do that. You cannot stop/pause mounted event from happening. Vue.js doesn't know when API response will be available. It could take 2 seconds, 3 seconds or simply fail.
The only option you have is to use v-if in your template. As long as your array length is zero, you can hide DOM elements or show loading progress bar.
Finally, you may want to initialize some sort of Chart, then you can use Vue.js watcher or initialize it within the then() block of the API.
EDIT
I have to do this, then I will use watcher if I wish to initialize Charting component on every change like this:
watch: {
catFeedingsAgain() {
AmCharts.makeChart(this.$refs.line, {
"type": "serial",
"dataProvider": this.catFeedingsAgain,
});
}
},
If I have to do this only once, then I would something like this:
methods: {
getFeedingsAgain(value) {
axios.get(`${process.env.KITTY_URL}/api/v1/feedings/?cat__slug&cat__name=${value}`)
.then(response => {
this.catFeedingsAgain = response.data.results;
AmCharts.makeChart(this.$refs.line, {
"type": "serial",
"dataProvider": this.catFeedingsAgain,
});
})
.catch(error => console.log(error));
},
}
Both are right approaches. It all depends upon the context.

Answer 3

You should fetch the data when the view is created and the data is already being observed and this is happens at created hook.
// rename beforeMount -> created
created(){
this.getFeedingsAgain(this.message);
}
From Vue created docks
At this stage, the instance has finished processing the options which
means the following have been set up: data observation, computed
properties, methods, watch/event callbacks. However, the mounting
phase has not been started
Seems like this is what you are looking for