Method not called instead returns this.method is not a function

Question

Below is how my index.vue file looks like. The issue I am facing here is in the fancy box under the after close I am calling messageAlert method but it is returning this.messageAlert is not a function

Please help me resolve this issue.

<template>
 <div>
  <v-btn @click="openCal">Open Now</v-btn>
 </div>
</template>

<script>
  export default {
    methods: {
      messageAlert() {
        alert("Method is called")
      },
      
      openCal() {
            let src = 'https://google.com/'

            $.fancybox.open({
              type : 'iframe',
              scrolling : 'yes',
              src  : src,
              opts : {
                afterShow : function( instance, current ) {
                  $("body").attr("style", "overflow: hidden; position: fixed;")
                  // setTimeout(function() {
                    $(".fancybox-content").attr("style", "height: 90% !important; overflow: scroll;")
                    $(".fancybox-content > iframe").attr("style", "height: 101% !important; overflow: scroll;")
                    $(".fancybox-content > iframe").attr("scrolling", "yes")
                  // }, 500)
                },
                afterClose : function( instance, current ) {
                  $("body").attr("style", "")
                  this.messageAlert();
                  this.messageAlert is not a function(error message)
                }
              }
            });
      }
    }
  };
</script>

score 2 · Accepted Answer · answered Sep 02 '21 at 17:52

That is because of the scope of the function; afterClose : function has it's own scope (this), so that it does'nt have messageAlert function. You should make it anonymous:

afterClose : ( instance, current ) => {
  $("body").attr("style", "")
  this.messageAlert();
}

or you can pass an instance:

<v-btn @click="openCal(messageAlert)">Open Now</v-btn>
...
openCal(callback) {
  ...

  afterClose : function( instance, current ) {
    $("body").attr("style", "")
    callback();
  }

score 0 · Answer 2 · answered Sep 02 '21 at 18:01

An alternative to Tina's good answer is to pass the component's context in a variable.

openCal() {
        let self = this

        $.fancybox.open({
          ...
          opts : {
            afterClose : function( instance, current ) {
              $("body").attr("style", "")
              self.messageAlert();
            }
          }
        });
}

Method not called instead returns this.method is not a function

2 Answers2