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