Управление данными в Vue для параметров диаграммы

Question

Я бью api отдыха, давая мне набор данных на части оборудования.Мне нужно получить первый столбец данных в виде массива, и я, кажется, не все правильно.Я пытался вычислить и методы в vue, но он всегда возвращает [].Кто-нибудь знает, что я могу делать не так?{{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

В этой строке кода

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

может быть this.data[i] заменено на this.datas[i];

Answer 2

Во-первых, чтобы быть в безопасности, убедитесь, что в вашем вычисляемом свойстве существует datas. Первоначально он установлен в массив, но если возвращаются неверные данные, это может привести к ошибке. Таким образом, вы можете проверить что-то прямо внутри вашего вычисляемого свойства, например if(this.datas && this.datas.length), и только если это правда, попробуйте заполнить chartdates. В противном случае вернуть пустой массив.

Во-вторых, основываясь на JSON, который вы включили, дату можно извлечь в цикле for с помощью

this.datas[i].date

То, что у вас сейчас есть, получит весь объект внутри { .. }, а не только дату. Также есть опечатка, использующая this.data[i], когда она должна быть this.datas[i].

Наконец, чтобы сделать chartdates массивом, вам нужно установить chartdates[i] для каждого i -ого значения, в противном случае только последнее значение будет сохранено в датах диаграммы, как указал Стивен.

Answer 3

Попробуйте это:

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