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>

    <div id="chart"></div>

</template>

<script>

import * as echarts from 'echarts';

export default{

    mounted(){

        this.myChart=echarts.init(document.getElementById('chart'));

        ...

    }

}

<script>

正确版本

<template>

    <div ref="chart"></div>

</template>

<script>

import * as echarts from 'echarts';

export default{

    mounted(){

        this.myChart=echarts.init(this.$el);//也可以用this.$ref.chart

        ...

    }

}

<script>

Answer 2

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