Vue calls events in echart to assign values to data in data. Can't you listen for changes with watch?

problem description

call the timelinechanged event in echart in vue, and assign the currentIndex in it to the variable in data. Then use watch to listen for changes in this variable, and find that you cannot listen

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)
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");
}

}

what result do you expect? What is the error message actually seen?

you can listen for currentIndex changes in watch, but not

Vue.js echarts timeline

Dec.07,2021

this binding problem, you can try to output this in the callback function of timelinechanged , which should be undefined . The right way to do this is to use the arrow function, or use an ugly that instead of this.

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

Previous: Why does onpageshow's persisted always turn on false? when it is opened by cell phone safari?

Next: Combination and de-duplication of js numbers