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
这是使用第二个v-column
2回答
-
慕哥9229398
大概率是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>00 -
不负相思意
要保证请求到数据之后在渲染， 最好用v-if控制00
相关分类