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（）块，在这里我使用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() {
  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
}

Answer 2

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

以上内容将在处理对您的请求的响应之前运行，因为它是异步的。一旦您从服务器获得响应，您的代码将继续执行，而.then（）部分将在另一个线程上执行。

无法更改数组，因为我遇到了范围问题

2 个答案: