如何在Javascript中调用外部的vue实例

如何在javascript中调用测试vue？这是我的代码，我想在javascript函数中执行某些操作时调用test

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

---

您正试图在

clickit（）中使用
this
，其中
this
指的是
窗口
，因此您只需删除
this
，它应该调用视图模型中的方法：

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

使用外部java脚本调用VueJs方法的另一种方法。

首先，我们应该创建一个文件。name event.js

import Vue from 'vue';

export default new Vue({
    data: {

    }
});

之后，我们应该将event.js导入到我们的组件中

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

然后我们可以在javascript函数上发出一个事件，如下所示

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

在组件中，装入的属性应如下所示：

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

如果使用“vue cli service build”编译此代码，则不会定义变量“test”，但可以在装入的函数中使其对javascript可见：

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

然后您可以从javascript调用它：

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

可能重复的