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

我自己写了一个组件,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

clipboard.png
这是使用第二个v-column

clipboard.png

阅读 17.8k
2 个回答

大概率是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>

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题