Javascript 在vue chartjs中循环通过数组

我正在使用Laravel 5.7，并一直在使用

预期结果：

我想将一个数组传递给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"
]

我正在使用刀片服务器中的将阵列传递给Vue组件

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

我正在阅读，但每当我尝试为循环添加一个

，我都会得到一个
未捕获的错误：模块构建失败：语法错误：意外标记（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>


从“vue chartjs”导入{Line}
导出默认值{
扩展：行，
道具：['chartData']，
安装的（）{
console.log（this.chartData）；//这很有效
var length=this.chartData.length；//这也是
这是我的艺术({
标签：[“比率值”]，
//这会产生上面列出的错误
对于（变量i=0；i

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

任何建议都将不胜感激
 将您的
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
        }
      ]
    })
  }
}

从“vue chartjs”导入{Line}
导出默认值{
扩展：行，
道具：['chartData']，
安装的（）{
var length=this.chartData.length；
var数组=this.chartData；
//创建新数组以存储数据
var-ratioArray=[]；
var labelsArray=[]；
对于（变量i=0；i

当。
从
mounted（）
内循环
此.cartData
时，您不能调用函数？我看不出这里有什么问题。嘿@Camilo，首先，谢谢你的回复。这就是我正在努力的地方——我知道我需要在阵列中循环，我只是不知道如何做到这一点。你能给出一个例子的答案吗？我是一个PHP/Laravel guy-JS不是我的强项。你链接的问题回答了这个问题，你应该尝试在你的
mounted（）
函数中使用
for（）
。可能重复@Camilo-如果它回答了这个问题，我就不会问它了。每当我回答问题时，我通常会举一个例子，以便人们能够学习。这不是网站的全部意义吗？分享知识？我将把这个答案标记为被接受，因为你帮助我找到了正确的道路。我对其进行了编辑，以包含组件re：将数据推送到新阵列。非常感谢您今天抽出时间，非常感谢！