VueJS 组件 prop 仅在重用时显示最后一个 JSON 条目

Question

我想要做的是重新使用带有prop 的vue 组件，该组件从json 对象中获取数据。我的问题是，所有组件都包含相同的数据，而不是基于 de json 对象索引的数据。

我的json 数据如下所示（sn-p）：

[
    {
        "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
            ]
        ]
    }
]

我的主要组件（它基本上包含一个 v-for 循环来填充我想要重用的组件）如下所示：

<template>
    <div>
        <b-card :bg-variant="themeVariant.cardBG" text-variant="gray" class="card-settings" style="padding: 10px; min-height: 660px">
            <b-row>
                <b-col sm="12">
                    <span class="float-left">
                        <h5><icon name="search-plus" scale="1"/> Details</h5>
                    </span>
                </b-col>
            </b-row>
            <hr>
            <b-row>
                <b-col sm="12">
                    <b-list-group flush>
                        <b-list-group-item v-for="i in tableData" :key="i.id_department" class="flex-column align-items-start" style="background: transparent; text-align: left; border-bottom: 1px; color: rgb(139, 154, 162)">
                            <b-row>
                                <b-col md="2">
                                    <b-button v-b-toggle="i.id_department" size="sm" :variant="themeVariant.colPrimary">
                                        Details
                                    </b-button>
                                </b-col>
                            </b-row>
                            <b-collapse :id="i.id_department">
                                <b-row>
                                    <b-col md="6">
                                        <c-srchartindicatorfee :set-chart-data="i.indicatorChartData"></c-srchartindicatorfee>
                                    </b-col>
                                </b-row>
                            </b-collapse>
                        </b-list-group-item>
                    </b-list-group>
                </b-col>
            </b-row>
        </b-card>
    </div>
</template>

<script>
    import Icon from 'vue-awesome/components/Icon.vue'
    import srchartindicatorfee from "./chartindicatorfee/srchartindicatorfee"
    export default {
        name: "srtable",
        props: {
            tableData: Array
        },
        components: {
            Icon,
            "c-srchartindicatorfee": srchartindicatorfee
        }
    }
</script>

<style scoped>
    .card-settings {
        margin-bottom: 30px;
    }
</style>

我的c-srchartindicatorfee 组件看起来像这样：

<template>
    <div>
        <highcharts :options="chartIndicatorFee"></highcharts>
    </div>
</template>

<script>
    import { chartIndicatorFee } from "./chartindicatorfee"
    export default {
        name: "srchartindicatorfee",
        props: {
            setChartData: Array
        },
        data() {
            return {
                chartIndicatorFee: chartIndicatorFee
            }
        },
        created() {
            this.chartIndicatorFee.series[0].data = this.setChartData
        },
        updated() {
            this.chartIndicatorFee.series[0].data = this.setChartData
        },
        watch: {
            setChartData: {
                handler(val) {
                    alert(JSON.stringify(val));
                    this.chartIndicatorFee.series[0].data = val;
                },
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>

在最后一个组件中，我想用我的json 对象中的indicatorChartData array 填充setChartData prop。

我希望（因为vue 组件可以重复使用）每个生成的c-srchartindicatorfee 组件都将通过json 通过setChartData prop 保存它自己的数据（indicatorChartData），但是在这种情况下，每个组件都保存我的 json 对象中最后一个条目的数据。

对这个问题有什么想法吗？

Answer 1

这是highcharts-vue 版本的问题。将表单版本 1.2.0 更新为版本 1.3.5。现在一切正常。

谢谢大家！