How to call vue methods inside jquery event?

Question

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?

Just a note here. You should not mix Jquery with any framework. I'm sure there is a way to acheive what you are trying to do directly in vue. — Nicolas
– Nicolas, Commented May 15, 2020 at 11:39
Well jquery is a very intrusive "framework" and most of the time it will interfere with the framework you are trying to use. It's better to only use the function that are supported by that framework to do what you are trying to do. This goes for any JS frameworks. — Nicolas
– Nicolas, Commented May 15, 2020 at 13:41

Terry · Accepted Answer · 2020-05-15 11:37:43Z

4

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

answered May 15, 2020 at 11:37

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

Collectives™ on Stack Overflow

How to call vue methods inside jquery event?

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