vue-echarts出现Uncaught TypeError: Cannot read property 'dispatchAction' of undefined
在vue项目中，使用自动展示的功能，能运行，但是一直报错Uncaught TypeError: Cannot read property 'dispatchAction' of undefined。虽然可以运行，一直打印错误看着挺闹心的。试了好久找了解决办法。
报错代码实现部分摘录
播放代码实现：
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize ref="cityMap"/>
</div>
</template>
//自动切换定时器， 自动切换项
let timer = null, nows = -1;
methods: {
autoShow(length) {
console.log("length >>> " + length)
nows = (nows + 1) % length;
this.$refs.cityMap.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: nows
});
},
initAutoShow() {
//每隔5秒钟自动切换到下一个数据点
this.autoShow(this.data.length);
clearInterval(timer);
timer = setInterval(() => {
this.autoShow(this.data.length);
}, 5000);
},
}
启动定时器：
mounted() {
//启动自动
this.initAutoShow();
},
一直报错Uncaught TypeError: Cannot read property 'dispatchAction' of undefined
解决办法如下：
在data数据添加一个变量，来保存实例变量
data() {
return {
cityMap:null //这个属性 保存实例变量
};
},
启动定时器：然后赋值cityMap
mounted() {
this.cityMap = this.$refs.cityMap
//启动自动
this.initAutoShow();
},
定时器方法修改如下“
methods: {
autoShow(length) {
console.log("length >>> " + length)
nows = (nows + 1) % length;
this.cityMap.dispatchAction({
type: 'showTip',
seriesIndex: 1,
dataIndex: nows
});
},
initAutoShow() {
//每隔5秒钟自动切换到下一个数据点
this.autoShow(this.data.length);
clearInterval(timer);
timer = setInterval(() => {
this.autoShow(this.data.length);
}, 5000);
},
}
this.$refs.cityMap 修改为 this.cityMap
修改完成之后，这让我的项目就不在报这个错误了。
