How to call vue methods inside jquery event?

Hey,
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?

You can work directly with the DOM (to and from Vue) using Refs.

You should be able to access your Vue instance if you mounted it to a variable, and then, give your component instance in your template(s) a ref attribute. You can then access the Vue instance’s refs object.

For example:

<my-component ref="foo" />
var myVue = new Vue({});
myVue.$refs.foo.myMethod()

If, for whatever reason, the above isn’t possible for you, you can also access the Vue instance by calling __vue__ (two underscores) on the element that Vue (or the component) is mounted on. But don’t do it this way, please :wink:

For example:

MyComponent.vue:

<template>
    <div id="myComponentDiv"></div>
</template>

export default {
    methods: {
        myMethod() {
            //Do Stuff
        }
    }
}

And then in jQuery:
$('#myComponentDiv').__vue__.myMethod()

1 Like