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

Question

我不知道为什么我不能在 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
          },
        ]
      }

Answer 1

我不太了解您代码中的模式，例如 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
}

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

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

javascript

vue.js

mount

watch

vue-chartjs