How to call vue instance outside it in Javascript

Question

How can I call the test vue in javascript? Here is my code, I want to call test when I do something in javascript function.

function clickit() {
   this.test.fetchTestData();    
}

var test = new Vue({
    el: '#viewport',
    data: {
        test_data: []
    },

    mounted: function () {
        this.fetchTestData();
    },

    methods: {
        fetchTestData: function () {
            $.get(test.json, function (data) {
                this.test_data = data;
               alert(this.test_data.isActive);
            });
        }
    }
});

Possible duplicate of Call a Vue JS component method from outside the component — Saurabh
– Saurabh, Commented Nov 23, 2016 at 9:33

craig_h · Accepted Answer · 2016-11-23 09:41:23Z

20

You are attempting to use this inside clickit() where this refers to window, so you just need to remove this and it should call the method inside the view model:

function clickit() {
   test.fetchTestData();    
}

answered Nov 23, 2016 at 9:41

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

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

Comments

Gerard Carbó · Accepted Answer · 2021-06-09 10:07:07Z

10

If you compile this code with 'vue-cli-service build' the variable 'test' will not be defined, but you can make it visible to javascript in the mounted function:

new Vue({
    el: '#viewport',
    data: {
        test_data: []
    },

    mounted: function () {
        window.test=this;
    },

    methods: {
        fetchTestData: function () {
            $.get(test.json, function (data) {
                this.test_data = data;
               alert(this.test_data.isActive);
            });
        }
    }
});

Then you can call it from javascript:

function clickit() {
   window.test.fetchTestData();    
}

answered Jun 9, 2021 at 10:07

Gerard Carbó

1,92319 silver badges17 bronze badges

2 Comments

Cruze Over a year ago

Works for me, VueJS 2.3.3 version. Thanks.

ihor.eth Over a year ago

talk about polluting the global namespace. at least create a namespace for your stuff e.g. window.myNameSpace.test

Harsha Basnayake · Accepted Answer · 2019-07-09 15:41:43Z

7

Another way to call VueJs method using external java-script.

Firstly we should create a file. name event.js

import Vue from 'vue';

export default new Vue({
    data: {

    }
});

After that we should import that event.js to our component

import Event from "../event.js";

Then we can emit an event on our javascript function like below

function yourJavascriptFunction(){
    Event.$emit("fetchdata");
}

In your component, mounted property should be like below:

mounted() {
  Event.$on("fetchdata", group => {
    this.fetchData();
 });
},
methods() {
  async fetchData() {
     console.log('hoooray :)');
  }
},

answered Jul 9, 2019 at 15:41

Harsha Basnayake

4,8653 gold badges20 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to call vue instance outside it in Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related