我尝试使用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中并不常见，也不推荐。你应该使用绑定来确保你的属性被正确更新。