I've been utilizing Vue-chartjs with Laravel 5.7 for my project.
The goal:
I aim to pass an array to Vue so that I can dynamically generate a chart by looping through specific values.
My approach so far:
Here's the array I'm working with:
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"
]
To pass this array to my Vue component, I am using the :bind shorthand in my blade template.
:chart-data="{{ json_encode($array) }}"
I came across suggestions about using a sequential for loop, but attempting to implement a for loop led to an error message:
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 functioned as expected
var length = this.chartData.length; // Similarly successful
this.renderChart({
labels: ['Ratio Value'],
// The for loop attempt resulted in the above error
for ( var i = 0; i < length; i++ )
{
console.log(chartData[i]);
}
datasets: [
// My intention is to dynamically create the following
{
label: [chartData.order_date],
data: chartData.ratio
}
]
})
}
}
</script>
The array size remains constant at 5, which could allow me to store their values in hidden inputs within my blade template and leverage document.querySelector. However, this method feels cumbersome and suboptimal.
I would greatly appreciate any guidance or suggestions!