如何从事件侦听器回调函数访问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);
         }
      });
    });

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

How to access vue3 methods from event listener callback function

javascript

materialize

vue.js

vuejs3