Question

我正在点击一个REST 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

尝试一下：

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

Answer 2

在这行代码中

data_list = $("#datatable").dataTable({
   // 
});

$(".opt").change(function () {
   data_list.fnReloadAjax("(..your base url..)?startDate=" + $('.opt').val());
   data_list.fnClearTable(0);
   data_list.fnDraw();
});

可能是getDates() { let chartdates; for (let i = 0;i< this.datas.length; i++) { chartdates = this.data[i]; } return chartdates; }被this.data[i]取代

Answer 3

首先，为了安全起见，请检查您的计算属性中是否存在datas。它最初设置为数组，但是如果返回无效数据，则可能导致错误。因此，您可以直接在计算属性内检查诸如if(this.datas && this.datas.length)之类的内容，只有在确实如此的情况下，才尝试填写chartdates。否则，返回一个空数组。

第二，根据您包含的JSON，可以使用以下代码在for循环中提取日期

this.datas[i].date

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

最后，要使chartdates成为数组，您需要将chartdates[i]设置为每个 i 值，否则，正如Steven指出的那样，只有最后一个值将存储在图表中

在Vue中为图表选项操作数据

3 个答案: