需要 VueJS Getter 仅将最后一个 JSON 属性的所有值作为数组返回

Question

我正在使用 Django REST 后端将 API 数据发送到 VueJS 前端。 我正在尝试将每日计数放在 ChartJS 图表中。

import { HorizontalBar } from '../BaseCharts'

export default {
  extends: HorizontalBar,
  data() {
    return{
    }
  },
  mounted () {
    /* Need to write the API call for chart data here. */
    this.$store.dispatch("DailyCountAction")

this.renderChart({
  labels: [this.$store.state.DailyCount],
  datasets: [
    {
      label: 'Existing Patients',
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
  ],
  borderWidth: 1,
      data: [4,8,2,]
    }, 

您可以在“标签”字段中看到我有一个返回数据的 getter：

 {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    },

我只需要将所有 Current_Cycle_Date 值返回到进入“标签”字段的数组中。我对如何解决这个问题感到非常困惑。

最后，标签字段应如下所示： 标签：['2092019', '2082019', '2072019', '2062019']

我已经看到了在 getter 中使用 MAP 的示例。到目前为止没有任何效果。这可以使用方法中的一些逻辑来完成吗？

任何建议将不胜感激！

Answer 1

也许您可以尝试将其作为数组返回：

const data = [{
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "2",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2062019"
    },
    {
        "Check_In_Count": "4",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "6",
        "Cancelations": "0",
        "New_Patient_Count": "1",
        "Existing_Patient_Count": "3",
        "Current_Cycle_Date": "2072019"
    },
    {
        "Check_In_Count": "7",
        "Average_Time_Spent": "3",
        "Average_Wait_Time": "9",
        "Cancelations": "0",
        "New_Patient_Count": "0",
        "Existing_Patient_Count": "7",
        "Current_Cycle_Date": "2082019"
    },
    {
        "Check_In_Count": "8",
        "Average_Time_Spent": "8",
        "Average_Wait_Time": "1",
        "Cancelations": "0",
        "New_Patient_Count": "4",
        "Existing_Patient_Count": "4",
        "Current_Cycle_Date": "2092019"
    }]


var ccd = data.map( i => i.Current_Cycle_Date )

console.log( ccd )