Javascript Can'；不要更改我的数组，因为我'；我们有范围问题

我不知道为什么，但我的仪表盘有些问题。 所以基本上我想制作一些精美的甜甜圈图表。 为此，我准备了一个数据集数组，在其中输入我的数字。所有这些都有效。 但是当我从数据库中获取数据时，我想更改数组，以更新图表。 这就是我的问题所在

因此，我的data（）如下所示：

data() {
  return {
    disturbances_category_0: [],
    disturbances_category_1: [],
    disturbances_category_2: [],
    disturbances_category_3: [],
    datasets: [
      {
        data: [20, 20, 10, 50], //HERE I HAVE TO CHANGE THE NUMBERS <-------------
        backgroundColor: ["#A40000", "#580000", "#EC4A3B", "#179C7D"],
        hoverBackgroundColor: ["#ff1a1a", "#b30000", "#f4948b", "#66bfac"]
      }
    ],
    labels: ["Banana", "Apple", "Strawberry", "Cherry"],
    option: {}
  };
},

如果我测试这个脚本，我总是得到“20”作为打印输出。 我不知道为什么它不改变数据集。数据数组。。。我也尝试过使用Array.push，但是。。。什么事也没发生

我肯定我忘了一些显而易见的事情

console.log(this.datasets[0].data[0]); 

---

由于请求的响应是异步的，因此上述操作将在处理请求的响应之前运行。当从服务器获得响应后，.then（）部分将在另一个线程上执行时，您的代码将继续执行。

这是因为控制台日志可能发生在执行then块之前很久。它的初始值是一个由四个整数组成的数组，然后用长度覆盖它。尝试使创建的函数异步，并等待axios承诺链解决

async function created() {
  await axios.get('http://localhost:3030/disruptions/', { // await the resolve
    params: {
      DisruptionCategory: 0
    }
  })
  .then((response) => {
    this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY 
    this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH
  })
  .catch((error) => {
    console.log(error.data);
  });

  //imagine that for the other fruits as well...
  console.log(this.datasets[0].data[0]); // now this should be updated
}

---

你在使用哪个图表插件？我认为数据正在更新，但您需要刷新图表以反映新数据。

axios.get（）

调用是异步的，而

中的代码是异步的。然后（）

回调将在HTTP请求完成之前运行。关于承诺和异步的帖子太多了……我正在使用vue chartjs（）。但是让我们首先关注一个事实，我不能改变数组。所以这只是基本的javascript。我不知道为什么。这完全独立于图表方面……您是否在问，为什么在控制台中。记录

this.datasets[0]。data[0]

仍在返回

20

？这是因为控制台日志可能发生在执行then块之前很久。它的初始值是一个由四个整数组成的数组，然后用长度覆盖它。尝试使创建的

函数异步，并等待axios承诺链解决。它也不是面向对象的，但同时它尝试异步。我只是不知道如何解释发生了什么，但我建议只使用“async created（）”，这对meAh很有效，我不确定您的确切代码结构以及该函数所在的位置。干杯
async function created() {
  await axios.get('http://localhost:3030/disruptions/', { // await the resolve
    params: {
      DisruptionCategory: 0
    }
  })
  .then((response) => {
    this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY 
    this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH
  })
  .catch((error) => {
    console.log(error.data);
  });

  //imagine that for the other fruits as well...
  console.log(this.datasets[0].data[0]); // now this should be updated
}