My aim is to reuse a vue component with a prop that takes data from a json object. However, the issue I'm facing is that all instances of the component are displaying the same data instead of data based on the index of the json object.
This is how my json data looks:
[
{
"id_department": 3,
"code": "Test2",
"subcode": "Test-new2",
"fee": "1.794.405",
"fte": "13.0",
"fee_per_fte": "138.031",
"details": "0",
"indicatorChartData": [
[
"A",
607990
],
[
"B",
753637
],
[
"C",
25321
]
]
},
{
"id_department": 9,
"code": "Test",
"subcode": "Test-new",
"fee": "892.571",
"fte": "18.0",
"fee_per_fte": "49.587",
"details": "0",
"indicatorChartData": [
[
"A",
525829
],
[
"B",
68512
],
[
"C",
12660
]
]
}
]
The main component responsible for looping through the tableData and rendering the reusable component is as follows:
<template>
...
</template>
<script>
...
</script>
<style scoped>
...
</style>
The c-srchartindicatorfee component is structured like this:
<template>
...
</template>
<script>
...
</script>
<style scoped>
...
</style>
The problem lies in populating each instance of c-srchartindicatorfee with its respective data from the indicatorChartData array in the json object. Currently, all components display data from the last entry in the json object rather than individualized data.
If you have any insights or suggestions regarding this issue, please let me know.