Question

如何在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);
            });
        }
    }
});

Answer 1

您正试图在this clickit()内this使用window，因此您只需要移除this并调用该方法在视图模型中：

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

Answer 2

恐怕你没有使用谷歌。谷歌搜索你的帖子标题后，你可以找到明确的答案： Call a Vue JS component method from outside the component

https://laracasts.com/discuss/channels/vue/use-objects-outside-vue

快速参考： E.g。

在我的父实例上注册一个竞争对手：

var vm = new Vue({
    el: '#app',
    components: { 'my-component': myComponent }
});

使用参考：

在template / html中渲染组件

<my-component ref="foo"></my-component>

现在，在其他地方我可以从外部访问组件

<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>

Answer 3

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

首先，我们应该创建一个文件。名称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 :)');
  }
},

Answer 4

如果您使用 '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();    
}

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

4 个答案: