我尝试使用axios为我的图表获取数据,但我不知道如何使其显示在画布上,我可以在console.log上看到如下值
Console.log,我不太清楚发生了什么,下面是我的代码:
mounted(){
const ctx = document.getElementById('myChart');
let myData = [];
const myChart = new Chart(ctx,
{
type: 'line',
data: {
labels: [....],
datasets: [{
data: this.myData,
backgroundColor: [ ['blue']],
}] },
options: {.....}
});
myChart;
方法是:
created: function(){
this.getData();} ,
methods: {
getData : function(){
axios.get('http://localhost:3000/Chart/chartjs')
.then(resp => {this.myData = resp.data
console.log(resp.data); }) }
1条答案
按热度按时间bnlyeluc1#
您的问题与VueJS的React性基本原理有关。由于您在挂载的方法中声明了一个局部变量,并试图访问 this 上的属性myData,而没有在组件中声明它,因此VueJS将不会更新UI。
从您展示代码的方式来看,我假设您使用的是带有Options API的VueJS3。
要拥有一个React式组件,你需要声明一个React式状态。这通常在mounted()方法之前完成。
之后,在mounted和getData方法中,您需要使用
this.myData
.VueJS来处理React性,而不是声明myData。另外,我注意到你试图直接访问DOM。这在VueJS中并不常见,也不推荐。你应该使用绑定来确保你的属性被正确更新。