【发布时间】：2018-07-29 09:21:37
【问题描述】：
我在 getFeedingsAgain 中有一个简单的 API 调用。我在“beforeMount”中调用它，但我可以通过我的 console.logs 看到，一旦调用“mounted”，我的“catFeedingsAgain”数据值就保持为空。我试图在调用组件的“mounted()”生命周期钩子之前填充 catFeedingsAgain 数组，因此我在“mounted()”钩子中的函数可以使用该数组数据。我怎样才能做到这一点？
感谢您的宝贵时间。
更新：现在包括整个组件代码。
注意：我基本上是在尝试用 getFeedingsAgain 中 API 调用的结果数组替换 Amcharts...Line Chart #2...."dataProvider" 中的初始数组。
```
<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>
```
【问题讨论】：