无法更改我的数组，因为我有范围问题

Question

我不知道为什么，但我的仪表板有一些问题。所以基本上我想创建一些花哨的甜甜圈图。为此，我准备了一个数据集数组，我将我的数字放入其中。所有这些都有效。但是当我从数据库中获取数据时，我想更改数组以更新图表。这是我有问题的地方。

所以我的 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: {}

  };

},

然后是我的 created()-Block，我使用 Axios + Sequelize 和 Feathers 来获取我的数据：

created() {

  axios.get('http://localhost:3030/disruptions/', {

    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]);

}

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

我确定我忘记了一些明显的东西......

Answer 1

这是因为控制台日志很可能在执行 then 块之前很久就发生了。在用长度覆盖它之前，它的初始值是一个由四个整数组成的数组。尝试使创建的函数异步并等待 axios 承诺链解决。async function created() {&nbsp; await axios.get('http://localhost:3030/disruptions/', { // await the resolve&nbsp; &nbsp; params: {&nbsp; &nbsp; &nbsp; DisruptionCategory: 0&nbsp; &nbsp; }&nbsp; })&nbsp; .then((response) => {&nbsp; &nbsp; this.disturbances_category_0 = response.data.data; //HERE IS THE COMPLETE ARRAY&nbsp;&nbsp; &nbsp; this.datasets[0].data[0] = this.disturbances_category_0.length; //HERE I WANT TO SET THE LENGTH&nbsp; })&nbsp; .catch((error) => {&nbsp; &nbsp; console.log(error.data);&nbsp; });&nbsp; //imagine that for the other fruits as well...&nbsp; console.log(this.datasets[0].data[0]); // now this should be updated}

Answer 2

console.log(this.datasets[0].data[0]);由于它是异步的，因此上面将在处理您的请求的响应之前运行。一旦您从服务器获得响应，您的代码将继续执行，而 .then() 部分将在另一个线程上执行。