How do I call a Vue method into a plain javascript function?

Question

Vue app code:

var app = new Vue({
    el: "#APP",
    data: {some data},
    methods: {
            some_method: function() {
                   ......
            }
});

some_js_func = function() {
       "How do I call 'some_method' to here"
};
some_js_func();

I tried by calling app.some_method(), but it's not working.

https://stackoverflow.com/questions/33682651/call-a-vue-js-component-method-from-outside-the-component — mrben522, Jan 09 '20 at 14:24

AndrewL64 · Accepted Answer · 2020-01-09T17:03:07.330

4

With pure JavaScript, you can access the some_method function via the $options property like this:

var app = new Vue({
    methods: {
            some_method: function() {
                   alert("hello");
            }}
});

someJSfunc = function() {
       app.$options.methods.some_method();
};

someJSfunc();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

edited Jan 09 '20 at 17:03

answered Jan 09 '20 at 14:34

AndrewL64

15,794
8
47
79

why dont call the method directly: `app.some_method();` ? – lmarqs Jan 09 '20 at 22:51
@Imarqs, this this not possible in Vue2 I guess. – Sanyam Jain Feb 06 '20 at 14:50
Worked for me like this `window.someJSfunc = function() { app.$options.methods.some_method(); };` – Rutvik D Mehta Oct 24 '21 at 14:25
with the app object, you can call app.some_method(); directly. – Kenny Lim Mar 28 '22 at 09:20

How do I call a Vue method into a plain javascript function?

1 Answers1