VueJS App 將 GET 請求中的數據放入數組中

Question

這是我的 VueJS 組件腳本，它應該在儀表板內顯示數據。

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        return response.json();
      }).then(data => {
        var result = JSON.parse(data) // eslint-disable-line no-console
        console.log(result.Fare) // eslint-disable-line no-console
      })
    }
  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

從我的后端接收數據工作正常，但我無法將其放入圖表中。 我仍然在努力如何處理異步任務，所以我嘗試了這個但失敗了

this.data.push(result.Fare)

Header.vue?5e07:33 Uncaught (in promise) TypeError: 無法讀取 VueComponent.eval (Header.vue?5e07:34) 處未定義的屬性“推送”

誰能告訴我如何做到這一點？

更新：這是我觸發方法的模板：

<template>
  <div>
    <button @click="fetchData" class="btn-primary">Get Data</button>
    <highcharts
      :options="chartOptions"
    ></highcharts>

  </div>
</template>

Answer 1

如果您正在嘗試this.data.push ，請查看您的代碼，它告訴您它的未定義是可以理解的。 要在您的 fetchData 方法中獲取您的數據道具，您必須使用this.chartOptions.series[0].data.push我不確定您在該代碼中在哪里觸發 fetchData 。 嘗試將其移動到 vue 生命周期中的創建/掛載方法，然后您可以將您的 chartOptions 更改為計算或觀察者，在 data() 方法中設置數據並使用 this.data 在您的 chartOptions 中調用它。

更新：點擊對於您的 get 請求來說很好，如果它正在觸發保持不變，那么您在哪里設置它就是問題所在。 我重構了你的請求，如果它在你測試它時成功 response.data 應該給你你需要的結果，不知道為什么你需要解析它，除非它返回一個 json blob 作為字符串？ 我還在圖表渲染器中添加了一個v-if ，如果this.data為空，則不渲染。 看看你是怎么做的。

import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
//import stockInit from "highcharts/modules/stock";

//stockInit(Highcharts);
exportingInit(Highcharts);

export default {
  props: {
    partsdata: {
      type: Array
    }
  },
  methods: {
    fetchData() {
      this.$http.get('http://127.0.0.1:5000/data/')
      .then(response => {
        this.data.push(JSON.parse(response.data))
      })
    }
  },
  watch: {
    data: function() {
     this.chartOptions.series[0].data.push(this.data)
    }

  },
  components: {
    highcharts: Chart
  },

  data() {
    return {
      data: [],
      chartOptions: {
        series: [{
          data: [] // sample data
        }]
      }
    }
  }
};
</script>

    <template>
        <div>
            <button @click="fetchData" class="btn-primary">Get Data</button>
            <highcharts if="data.length > 0" :options="chartOptions" ></highcharts>

        </div>
    </template>

Answer 2

您需要正確獲取數據並更改 chartOptions：

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
    <button @click="fetchData" class="btn-primary">Get Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      fetch('https://api.myjson.com/bins/ztyb0')
      .then(response => {
        return response.json()
      })
      .then(data => {
        this.chartOptions.series[0].data = data;
      })
    }
  },
  data() {
    return {
      chartOptions: {
        series: [{
          data: []
        }]
      }
    };
  }
};
</script>

---

現場演示： https : //codesandbox.io/s/highcharts-vue-demo-05mpo

文檔： https : //www.npmjs.com/package/highcharts-vue