在将数据传递到已安装部分中的函数myChart时遇到麻烦。我是vuejs的新手,在理解问题时遇到了一些困难。 我想在标签和数据集中传递数据,这些数据是从我的函数中调用的。有人可以帮忙吗?提前致谢 代码:
<script>
import Chart from 'chart.js';
export default {
data() {
return {
tests:[]
};
},
created(){
this.mine();
},
methods: {
mine(){
let self = this;
this.$http.get('tests/mine').then(response=>{
self.tests = response.data.tests;
}).then(error=>{
console.log(error) ;
});
}},
mounted() {
var self=this;
var ctx = document.getElementById("weightchart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: test.dt_test,
datasets: [{
label: 'weight',
data: test.weight,
backgroundColor: [
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0)',
'rgba(255, 255, 255, 0)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
},
computed: {},
watch: {}
}
</script>
答案 0 :(得分:0)
代替为异步调用创建另一个函数,您可以在安装的内部添加get调用,并在.then()函数的返回中创建您的图表并执行其他操作。
其他方法可能是您从方法中返回promise对象,然后在其.done()方法上编写已装入的代码逻辑。
答案 1 :(得分:0)
您的代码很好。从服务器获取数据之前,代码正在执行完毕。当您调用方法mine()时,它正在异步发送HTTP请求。但是您的Vue代码不会等待它将得到的响应。相反,它将继续运行脚本的其余部分。到服务器收到响应时,Vue已经用空白数据初始化了图表。
因此,您必须确保从服务器成功获取数据后初始化图表。从服务器获取数据后,将初始化代码放入方法中并调用该方法-
this.$http.get('tests/mine').then(response=>{
self.tests = response.data.tests;
// initialize your chart here, like -
// this.initChart();
}.bind(this)).then(error=>{
console.log(error) ;
});