Call framework7 app methods inside jquery event

It is possible to call framework 7 app methods inside a jquery event handler inside a component.

ERROR

    VM2339:22 Uncaught TypeError: Cannot read property 'toast' of undefined
    at HTMLInputElement.<anonymous> (<anonymous>:22:15)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)

COMPONENT PAGE

</template>

<script>

  return {

    mounted() {

      const self = this;

      const app = self.$f7;

      // format card number

      $('#card-number').payform('formatCardNumber');

      $("#card-number").on('keyup', function () {

        const self = this;

        const app = self.$f7;

      

        validateCard = $.payform.validateCardNumber($(this).val());

        console.log( validateCard );

        // validate the credit card

        if ( validateCard == false) {

          

          // return a f7 toast error.

          app.toast.create({

            text: 'I\'m on center',

            position: 'center',

            closeTimeout: 2000,

          });

        }

      });

Remove const self = this; from keyup event handler

Did not work when i tested with this

REMOVED THIS

const self = this;

ADDED THIS

app.dialog.alert('Oops! Testing alert.');

ERROR

VM754:44 Uncaught TypeError: Cannot read property 'dialog' of undefined
    at HTMLInputElement.<anonymous> (<anonymous>:44:15)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)

Change to
const app = this.$f7;

I DID THIS

const app = this.$f7;

console.log(app); retuns (undefined)

app.dialog.alert('Oops! Testing alert.');

VM169:44 Uncaught TypeError: Cannot read property 'dialog' of undefined
    at HTMLInputElement.<anonymous> (<anonymous>:44:15)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)

I found the solution.

window.app.dialog.alert('Oops! Testing alert.');

Thanks everybody for the support

It looks like you’re using Vue? By the existence of <template> in that snippet?

If you are - take a look at Vue $refs. It’s a much better way to access the DOM than jQuery!