How to access vue3 methods from event listener callback function

Question

Description

In the mounted() part of the component I add an event listener, which should call one of the methods.

Code

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);
         }
      });
    });
  }
}

Problem

I think there are two problems :

this in onCycleTo refers to the function in onCycleTo and not to the methods part
the eventListener gets added to the document, which is on a different scope, so this.changeState(1) refers to a global function (which does not exist)

Possible Solution

I think it might be possible to somehow address the methods from a global scope, but I don't know how. Any other solutions also welcome.

How can I resolve these Problems?

Boussadjra Brahim · Accepted Answer · 2021-03-09 10:33:35Z

1

Assign this to a global variable called vm then use to access the method :

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

You could also try arrow function :

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

edited Mar 9, 2021 at 10:33

answered Mar 9, 2021 at 10:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access vue3 methods from event listener callback function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related