如何从事件侦听器回调函数访问vue3方法

Question

描述

在组件的mounted()部分，我添加了一个事件侦听器，它应该调用其中一个方法。

代码

export default {
methods: {
changeState: function(el) {console.log(el);}
},
mounted() {
document.addEventListener('DOMContentLoaded', function() {

//I'm using materialize.css carousel here
//---------------------------------------
var elems = document.querySelectorAll('.carousel');
M.Carousel.init(elems, {
onCycleTo: function(el) {
this.changeState(1);
}
});
});
}
}

问题

我认为有两个问题：

• onCycleTo中的this指的是onCycleTo中的函数，而不是方法部分
• eventListener被添加到文档中，该文档位于不同的范围内，因此this.changeState(1)引用了一个全局函数(该函数不存在)

可能的解决方案

我认为有可能以某种方式从全球范围内解决这些方法，但我不知道如何解决。也欢迎任何其他解决方案。

如何解决这些问题？

Answer 1

将this分配给名为vm的全局变量，然后使用访问方法：

var vm=this;
var elems = document.querySelectorAll('.carousel');
M.Carousel.init(elems, {
onCycleTo: function(el) {
vm.changeState(1);
}
});
});

你也可以试试箭头功能：

var elems = document.querySelectorAll('.carousel');
M.Carousel.init(elems, {
onCycleTo: (el)=> {
this.changeState(1);
}
});
});