VueJs Axios D3.js“錯誤：太晚了；已經在運行”

我正在嘗試使用 Vue-d3-charts 可視化一些資料。我正在使用 axios 異步獲取資料。問題是我在將回應資料推送到 chart_data 時遇到問題。我得到的錯誤是我的變數（buildingdata）與回應是未定義的（可能是因為回應比其他所有東西都晚，因此）或Error in callback for watcher "datum": "Error: too late; already running。現在我已經通過控制臺將回應記錄到我的瀏覽器來確認我確實得到了有效的回應。我究竟做錯了什么？

這是我的組件中的 vue 代碼

<template lang="pug">
div
  .card
    .card-body
      //here is where the D3 component is 
      <D3BarChart :config="chart_config" :datum="chart_data" :title="chart_title"></D3BarChart>
</template>

<script>
import { D3BarChart } from 'vue-d3-charts';
import axios from "axios;
export default {
  components: {
    D3BarChart,
  },
  created(){
    console.log("created function ran")
    const sendGetRequest = async () => {
      try {
        let response = await axios.get("path_to_endpoint");
        let buildingdata = response.data;
        console.log(buildingdata)
        //the code runs fine until i get here and try to push the response data to the chart_data. 
        this.chart_data.push(...buildingdata)
      }
      catch (error) {
        console.log(error);
      }
    };
    sendGetRequest();

  },
  data() {
    console.log("data setup ran")
    return {
      chart_title: "Title",
      // Chart data, this is where D3 gets its data from.
      chart_data: [

      ],
      // This is the chart config. it is from here you can change the chart type, colors, etc.
      chart_config: {
        key: 'name',
        values: ['value'],
        orientation: 'vertical',
      },
    }
  },
}

</script>

這是我的瀏覽器控制臺的輸出

App mounted App.vue:35
data setup ran building.vue:36
created function ran building.vue:20
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html vue.esm.js:9132
Array(5) [ {…}, {…}, {…}, {…}, {…} ]
[Vue warn]: Error in callback for watcher "datum": "Error: too late; already running"

found in

---> <D3BarChart>
       <OpenWoPerBuilding> at app/javascript/apps/new_insights/components/open_wo_per_building.vue
         <App> at app/javascript/apps/new_insights/App.vue
           <Root> vue.esm.js:628
    VueJS 15
    _callee$ open_wo_per_building.vue:26
    tryCatch app.js:221
    _invoke app.js:221
    defineIteratorMethods app.js:221
    asyncGeneratorStep app.js:235
    _next app.js:237
    (Async: promise callback)
    asyncGeneratorStep app.js:235
    _next app.js:237
    _asyncToGenerator app.js:237
    _asyncToGenerator app.js:237
    sendGetRequest open_wo_per_building.vue:21
    created open_wo_per_building.vue:32
    VueJS 41
    js app.js:12
    (Async: EventListener.handleEvent)
    js app.js:9
    Webpack 7
Error: too late; already running
    set schedule.js:42
    tweenFunction tween.js:31
    __WEBPACK_DEFAULT_EXPORT__ each.js:5
    __WEBPACK_DEFAULT_EXPORT__ tween.js:67
    __WEBPACK_DEFAULT_EXPORT__ attrTween.js:43
    __WEBPACK_DEFAULT_EXPORT__ attr.js:74

uj5u.com熱心網友回復：

所以@kissu 用條件渲染技巧讓我走上了正確的軌道。我所做的是在“data()”中使用一個默認為 false 的標志，該標志在“created()”中從 axios 獲取資料后回傳 true。

<template lang="pug">
div(v-if="loaded")
  .card
    .card-body
        <D3BarChart :config="chart_config" :loaded="loaded" :datum="chart_data" :title="chart_title"></D3BarChart>
</template>

<script>
import { D3BarChart } from 'vue-d3-charts';
import axios from "axios";
export default {
  components: {
    D3BarChart,
  },
  created(){
    const sendGetRequest = async () => {
      try {
        let response = await axios.get("path_to_endpoint");
        let buildingdata = response.data;
        this.chart_data.push(...buildingdata)
        this.loaded=true
      }
      catch (error) {
        console.log(error);
      }
    };
    sendGetRequest();
  },
  data() {
    return {
      loaded: false,
      chart_title: "Title",
      chart_data: [],
      chart_config: {
        key: 'name',
        values: ['value'],
        color: {name: '#7f3727'},
        orientation: 'vertical',
      },
    }
  },
}

</script>

uj5u.com熱心網友回復：

在顯示組件之前，您需要等待一些資料。原因是模板是同步的并且不等待您的資料被獲取。

這可以通過一小部分v-if期望您的資料被獲取來解決。

<D3BarChart v-if="asyncDataDoneLoading"
  :config="chart_config"
  :loaded="loaded"
  :datum="chart_data"
  :title="chart_title">
</D3BarChart>

標籤：javascript Vue.js 异步 d3.js axios

上一篇：Angular隱藏了這個指標

下一篇：如何通過d3js用鉛筆刷