vue在echart中调用事件 给data里的数据赋值 用watch监听不到变化？

Question

问题描述

在vue中调用echart中的timelinechanged事件，并将里面的currentIndex赋给data中的变量，随后用watch监听这个变量的变化，发现监听不到

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
mounted() {

this.myChart = echarts.init(this.$refs.chartStock);
this.myChart.on("timelinechanged", function(params) {
  this.currentIndex = params.currentIndex;
  console.log(this.currentIndex);
});

}

watch: {

currentIndex: function() {
  console.log("hi");
}

}

你期待的结果是什么？实际看到的错误信息又是什么？

在watch中可以监听到currentIndex的变化，但是并没有监听到

Answer 1

this 绑定问题，你可以试着在在timelinechanged的回调函数中输出 this ,应该是 undefined。正确方法应该是使用箭头函数，要不就在用个难看的 that 代替 this。

this.myChart.on('timelinechanged', (params) => {
  this.currentIndex = params.currentIndex
  console.log(this.currentIndex)
})