Error: not a function (on mounted)

Question

I'm trying to implement something to close all menus/modals when a user clicks outside of the menu/modal area.

this.closeMenu() is being invoked correctly but I'm getting an error that says this.closeMenu is not a function. What's the reason for this?

methods: Object.assign({},
  {
    closeMenu(){
      console.log("close menu")
    }
  }
)


mounted(){
  $(document).on('click', function(event) {
    if (!$(event.target).closest('.menu').length){
      // close all menus
      this.closeMenu()
    }
  });
}

score 1 · Accepted Answer · answered Aug 02 '18 at 02:28

this keyword here is not Vue instance. You can do a trick by assign var self = this

mounted(){
  var self = this;
  $(document).on('click', function(event) {
    if (!$(event.target).closest('.menu').length){
      // close all menus
      self.closeMenu()
    }
  });
}

Error: not a function (on mounted)

1 Answers1