在 vue-chartjs 中循环遍历数组

Question

我正在使用 Laravel 5.7 并且一直在使用 vue-chartjs。

预期结果：

我想将一个数组传递给Vue并循环遍历特定值以动态创建图表。

我一直在尝试的：

我有以下数组：

0 => array:4 [▼
  "order_date" => "2019-04-01"
  "days_remaining" => 29
  "cash_remaining" => 26714.63
  "ratio" => "1.11"
]
1 => array:4 [▼
  "order_date" => "2019-04-02"
  "days_remaining" => 28
  "cash_remaining" => 26184.61
  "ratio" => "1.41"
]

我正在使用刀片中的 :bind shorthand 将数组传递给我的 Vue 组件。

:chart-data="{{ json_encode($array) }}"

我正在阅读有关 using a sequential for loop 的信息，但每当我尝试添加 for 循环时，都会收到 Uncaught Error: Module build failed: SyntaxError: Unexpected token (19:11) 错误。

<script>
import { Line } from 'vue-chartjs' 

export default {
  extends: Line,
  props: ['chartData'],

  mounted() {
    console.log(this.chartData); // This works
    var length = this.chartData.length; // So does this

    this.renderChart({
      labels: ['Ratio Value'],

      // This produces the error listed above
      for ( var i = 0; i < length; i++ )
      {
        console.log(chartData[i]);
      }

      datasets: [
        // I want to dynamically produce the following
        {
          label: [chartData.order_date],
          data: chartData.ratio
        }
      ]
    })
  }
}
</script>

数组长度恒定为 5，因此我可以将它们的值存储在刀片模板中的隐藏输入中并使用 document.querySelector，但这似乎很笨重，不是最佳路线。

任何建议将不胜感激！

Answer 1

将您的for() 移出renderChart() 呼叫：

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['chartData'],

  mounted() {
    var length = this.chartData.length;
    var array = this.chartData;

    // Create new arrays to store the data
    var ratioArray = [];
    var labelsArray = [];

    for ( var i = 0; i < length; i++ ) {
      // Then push our data to the new arrays
      labelsArray.push(array[i] ? array[i].order_date : '');
      ratioArray.push(array[i] ? array[i].mbr : '');
    }

   this.renderChart({
      labels: labelsArray, // Reference our new labelsArray
      datasets: [
        {
          label: 'Ratio',
          data: ratioArray, // And our new ratioArray
        }
      ]
    })
  }
}

initializing objects时不能调用函数。