7

I'm trying to call a function inside 'method' from outside. However, it isn't working.

Github issue reporting the same: https://github.com/vuejs/vue/issues/329

vm.test(); // call a function in method, not working
this.vue.test()  // not working
export default {
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
}
Gijo Varghese
  • 11,264
  • 22
  • 73
  • 122

4 Answers4

7

It is not very clear what the actual goal of the original poster is, however this is how you can call a method on a Vue instance, after creating it:

var viewModel = new Vue({
    el: "#app",
  data: {
    msg: "Hello there"
  },
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
});

viewModel.test();

Working example: https://jsfiddle.net/Daryn/Lja7pake/3/

If you are exporting a single file component then try this:

example.js

<script>
   export default {
    methods: {
      test: function() {
      alert('test fuction called');
     }
    }
   }
</script>

main.js

<script>
    import Thing from './example.js';
    Thing.test();
</script>

Reference: https://v2.vuejs.org/v2/guide/single-file-components.html

tony19
  • 125,647
  • 18
  • 229
  • 307
Daryn
  • 3,394
  • 5
  • 30
  • 41
  • That one looks good. Almost near to it. This is a separate component of vue. There is nothing like 'new Vue....', it starts with 'export default.....' – Gijo Varghese Jul 04 '17 at 11:23
  • I have updated the answer, I did not have time to verify that this works as I am out, but give it a try... – Daryn Jul 07 '17 at 09:48
3

What you are trying to achieve is fundamentally flawed. You can't call a method of a component unless you have a reference to an instance of that particular component. In your code, which particular component is vm referring to?

All you're doing is exporting a Vue component definition from your module; there's no component being instantiated here.

We'll need to see more of your code or a complete explanation of what exactly you're trying to achieve so we can provide an alternative solution. (Why are you trying to call the component's method outside of its definition?)

Decade Moon
  • 32,968
  • 8
  • 81
  • 101
1
export default {
  ...
  methods: {
    ...
  },
  mounted () {
    EventBus.$on(‘EVENT_NAME’, function (payLoad) {
      ...
    });
  }
}
obotezat
  • 1,041
  • 16
  • 20
1

This is the way I solved that problem.

For the purpose of this demonstration, we create a new project using Vue/CLI. After installation finished, we make the vm exposed to global. Open src/main.js and edit like so:

src/main.js

import Vue from 'vue';
import App from './App.vue';

var vm = new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

// Add this line (tambahkan baris berikut):
window.vm = vm;

Leave the generated App.vue like it is. So the first child of vm (vm.$children[0]) is App.vue.

We see that App.vue have a child. That makes HelloWorld.vue component as a grand children of vm (vm.$children[0].$children[0]). Knowing this, we can call the methods from outside 'export default' like this:

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <button 
      id="sebuahButton" 
      class="btn btn-outline-secondary btn-sm" 
      type="button"
    >Click Me, Jose!</button>
    <h1>{{ msg }}</h1>
    <!-- and some stuff, vue cli default generated code -->
  <div>
</template>

<script>
(function() {
    // wait for the DOM ready event in plain JavaScript
    document.addEventListener("DOMContentLoaded", event => {
        document.getElementById("sebuahButton").onclick = function() {
            vm.$children[0].$children[0].someAction();
        };
    });
})();

export default {
    name: "HelloWorld",
    props: {
        msg: String
    }
    methods: {
        someAction () {
            // do something (lakukan sesuatu masbro!)
            console.log("It's been called from outer space, Luke!");
        }
    }
}
</script>
Aston Dihor
  • 21
  • 4