CODEWITHSUNDEEP
jqueryvue.jswebpack
eli99
eli99

Reputation: 27

How to call vue methods inside jquery event?

I’m using vue with webpack. This is my code:

export default {
data() {
        return {
            start: true,
            logReg: false,
        }
},
methods: {
    checkLogged() {
        this.start = false;
        this.logReg = true;

    },
    closem(pathTo) {
        $('#mm').modal('hide')
        this.$router.push({ path: pathTo })

    }
},
mounted() {


    $('#mm').on('hide.bs.modal', function () {


       this.checkLogged();




    });
},
}

I’m trying to call “checkLogged” method inside the jquery event but it says the function is undefined. How can i call the method?

Upvotes: 1

Views: 1391

Answers (1)

Terry
Terry

Reputation: 66123

This is because the function() {...} creates a new scope, therefore the this inside the callback does not actually refer to the VueJS component anymore, but to the window object instead.

You can use an arrow function, which does not create its own this binding, but passes in the lexical this (i.e. the this in an arrow function is the same this as the context it is called in):

$('#mm').on('hide.bs.modal', () => {
   this.checkLogged();
});

Upvotes: 4

Related Questions