Проход по массиву в 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"
]

Я передаю массив моему компоненту Vue, используя : стенограмму bind в моем блейде.

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

Я читал о , используя последовательный цикл for , но всякий раз, когда я пытаюсь добавить цикл 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
        }
      ]
    })
  }
}

Вы не можете вызывать функции при инициализации объектов .