在VUE中操纵数据以获取图表选项

Question

我击中一个REST API，在设备上给我一个数据集。我需要将数据的第一列作为数组，但我似乎并不正确。我已经尝试了计算机和方法中的方法，但它总是返回[]。有人知道我做错了什么吗？{{datas}}毫无问题打印出我的JSON，但是当我添加{{getDate}}时，它返回找不到未定义的日期。

谢谢

<template>
  <v-app>
    <!-- <v-data-table :headers="headers" :items="datas" class="elevation-1">
        <template slot="items" scope="props">
          <td class="text-xs-right">{{props.item.date}}</td>
          <td class="text-xs-right">{{props.item.iron}}</td>
          <td class="text-xs-right">{{props.item.chromium}}</td>
          <td class="text-xs-right">{{props.item.lead}}</td>
        </template>
    </v-data-table>-->
    <p>{{ datas }}</p>
    <!-- <p v-for="data in datas">{{ data.date }}</p> -->
    {{ getDates }}
    <center>
      <chart :options="chartOptionsBar"></chart>
    </center>
    <chart :options="chartOptionsLine"></chart>
    <p>108J View</p>
  </v-app>
</template>
<script>
import axios from "axios";
export default {
  name: "E108J",
  components: {},
  data() {
    return {
      datas: [],
      chartDates: [],
      chartOptionsLine: {
        xAxis: {
          data: ["q", "Q2", "Q3", "Q4"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "line",
            data: [63, 75, 24, 92]
          }
        ],
        title: {
          text: "Quarterly Sales Results",
          x: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#127ac2"]
      },
      chartOptionsBar: {
        xAxis: {
          data: ["Q1", "Q2", "Q3", "Q4"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",
            data: [63, 75, 24, 92]
          }
        ],
        title: {
          text: "Quarterly Sales Results",
          x: "center",
          textStyle: {
            fontSize: 36
          }
        }
      }
    };
  },
  mounted() {
    axios
      .get("http://localhost:3000/E108J")
      .then(response => (this.datas = response.data));
  },
  computed: {
    getDates() {
      let chartdates;
      for (let i = 0;i< this.datas.length; i++) {
        chartdates = this.data[i];
      }
      return chartdates;
    }
  }
};
</script>

JSON数据：

[
{
date: "10/18/2018",
iron: "0",
chromium: "0",
lead: "3",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "1",
barioum: "0",
phosphorous: "3",
zinc: "2",
molybden: "1",
tin1: "0",
vandium: "2",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.41",
tan: "0.32",
kfish: "22",
water: "0.0022",
pc0: "455",
pc1: "139",
pc2: "25",
pc3: "11",
pc4: "1",
pc5: "0",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "11/2/2018",
iron: "0",
chromium: "0",
lead: "2",
copper: "0",
tin: "3",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "10",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "7",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "213.56",
tan: "0.19",
kfish: "29",
water: "0.0029",
pc0: "339",
pc1: "39",
pc2: "21",
pc3: "8",
pc4: "0",
pc5: "0",
pciso0: "16",
pciso1: "12",
pciso2: "12"
},
{
date: "11/29/2018",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "2",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "1",
zinc: "1",
molybden: "0",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "217.67",
tan: "0.18",
kfish: "21",
water: "0.0021",
pc0: "921",
pc1: "223",
pc2: "40",
pc3: "18",
pc4: "1",
pc5: "0",
pciso0: "17",
pciso1: "15",
pciso2: "12"
},
{
date: "12/13/2018",
iron: "0",
chromium: "0",
lead: "1",
copper: "0",
tin: "0",
aluminum: "1",
nickel: "0",
silver: "0",
silicon: "0",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "2",
zinc: "0",
molybden: "2",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.46",
tan: "0.26",
kfish: "22",
water: "0.0022",
pc0: "581",
pc1: "101",
pc2: "39",
pc3: "24",
pc4: "7",
pc5: "4",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "1/14/2019",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "4",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "222.35",
tan: "0.29",
kfish: "13",
water: "0.0013",
pc0: "663",
pc1: "140",
pc2: "13",
pc3: "11",
pc4: "2",
pc5: "0",
pciso0: "17",
pciso1: "14",
pciso2: "11"
}
]

Answer 1

首先，要安全起见，请检查您计算的属性中是否存在datas。它最初设置为数组，但是如果无效数据返回，则可能会导致错误。因此，您可以在计算机属性(例如if(this.datas && this.datas.length)(内检查某些内容，并且只有在TRUE尝试填充chartdates时，才可以检查。否则，返回一个空数组。

第二，根据您包括的JSON，可以使用

在for循环中提取日期

this.datas[i].date

您现在拥有的将使整个对象在{ .. }中而不仅仅是日期。当应该是this.datas[i]时，还有一个使用this.data[i]的错字。

最后，要使chartdates一个数组，您需要将chartdates[i]设置为每个 i th值，否则只有最后一个值将在ChartDates中存储在Chartdates中。史蒂文指出。

Answer 2

尝试以下：

<div v-if="datas.length > 0">
<p>{{ datas }}</p>
 {{ getDates }}
</div>

Answer 3

在此行中的代码

中

getDates() {
  let chartdates;
  for (let i = 0;i< this.datas.length; i++) {
    chartdates = this.data[i];
  }
  return chartdates;
}

可能是 this.data[i]替换为 this.datas[i];