Vue Chart.js - 无法将 return 数据用于图表数据集

Vue Chart.js - Can't use the return data for chart data set

我不知道为什么我不能在 async mounted() 部分使用我的 return 数据,如 this.point0, this.point1,当我调用它们时所有值都保持为 0。 immediate:true 无效,首先计算数据集无效。

我正在尝试做响应时间序列,当我按下不同的按钮时改变值,一切正常,值更新顺利,除了我可以在图表中使用这些值。 您可以在这里试用我的代码:https://jsfiddle.net/1eahf26q/

来自@Saksham 的一个有趣的评论问 "Why do you want to initialize the line chart in mounted(). It can be done whenever you are ready with the data" 我不太清楚他的意思。很抱歉这种问题,我第一次接触 Vue 和 javascript。

  extends: Line,
  props: ["height","breedKey", "time"],

  computed: {
    topic() {
      return this.breedKey;
    }
  },

  data() {
    return {
      point0: [],
      point1: [],
      point2: [],
    };
  },

  watch: {
   async breedKey (newVal, oldVal)  {
       try {

      this.promise = axios.get(api_url);
      const res = await this.promise;

      this.point0 = res.data.data[0].Freq;
      this.point1 = res.data.data[1].Freq;
      this.point2 = res.data.data[2].Freq;
    } 
   }
  },

  async mounted() {
    await this.promise;
    const datapresent = [];

    let p0 = this.point0;
    let p1 = this.point1;
    let p2 = this.point2;

    datapresent.push(p0, p1, p2);

    this.renderChart(
      {
        labels: ['First','Second', "Third"],
        datasets: [
          {
            label: "28 FEB",
            data:  datapresent
          },
        ]
      }

我不太了解您代码中的模式,例如 this.promise 的初始化位置。

你为什么不尝试一些更容易理解的东西。

methods: {
    async getApiChartData() {
        let responseData = (await axios.get(api_url)).data.data;
        return [responseData[0], responseData[1], responseData[2]];
    }
}

然后在挂载

async mounted() {
    let datapresent = await this.getApiChartData();
    //rest of your code
}