vue 自定义组件被同一个页面多次调用，数据被覆盖

Question

我自己写了一个组件，echarts里面的柱状图，数据与图表名字是动态的，

在column.vue中写了

props:{

    column:{

        text:{

            type:String,

            default:""

        },

        series: [Object],

    },

},

mounted(){

    //省略一部分代码

    this.myChart.setOption({

        series:this.column.series

    }）

}

之后在charts.vue中调用

<template>

    <div>

        <v-column :column="column"></v-column>

        <v-column :column="column2"></v-column>

    </div>

</template>

<script>

    import vColumn from '../common/Column.vue';

    export default {

        data() {

            return {

                column:{

                    text:"这个是标题",

                    series: [

                        {

                            name: '标题1',

                            type: 'bar',

                            barWidth: '60%',

                            data: [10, 52, 200, 334, 390, 330, 220]

                        }

                    ],

                },

                column2:{

                    text:"这个是标题2",

                    series: [

                        {

                            name: '标题2',

                            type: 'bar',

                            barWidth: '60%',

                            data: [10, 100,20,40,50,120]

                        }

                    ],

                }

            }

        },

        mounted() {},

        methods: {},

        components: {

            vColumn

        }

    }

</script>

但是显示出来的图表只有第一个是有数据的，而且数据是colum2的，请问如果同一个页面调用多次相同组件，但是数据不同，该怎么做呀，或者说怎么样局部调用，避免同页面中数据污染

这是使用第一个v-column

这是使用第二个v-column

Answer 1

大概率是echarts init有问题，是不是用class或id选择器选择元素来init了错误版本<template>&nbsp; &nbsp; <div id="chart"></div></template><script>import * as echarts from 'echarts';export default{&nbsp; &nbsp; mounted(){&nbsp; &nbsp; &nbsp; &nbsp; this.myChart=echarts.init(document.getElementById('chart'));&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; }}<script>正确版本<template>&nbsp; &nbsp; <div ref="chart"></div></template><script>import * as echarts from 'echarts';export default{&nbsp; &nbsp; mounted(){&nbsp; &nbsp; &nbsp; &nbsp; this.myChart=echarts.init(this.$el);//也可以用this.$ref.chart&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; }}<script>

Answer 2

要保证请求到数据之后在渲染， 最好用v-if控制