How do I call a Vue.js function from an external JavaScript file?

Question

I have to call a Vue.js function from an external JavaScript file, but it's not working. Below I have given the code that I have tried.

// external js file 
import vm from './vue.js';
function callingVuejsFunction(data) { 
 this.vm.displayData()
}
// Vuejs file
var vm = new Vue({
 el: '#app',
 data: {
 firstname : '' ,
 lastname : ''
 },
 methods:{
 displayData: function( ) {
 alert()
 } 
 } 
})

• linchong: try vm.displayData() instead this.vm.displayData()
• kp97338: its not calling.
• IVO GELOV: You need the reference to your Vue application - not to the Vue framework itself. Change the main.js in your Vue application so that it assigned the root Vue instance to a global variable (e.g. window.myApp) and then refer to this variable in your external script.

Answer 1

You can use vm.$options.methods.displayData():

var vm = new Vue({
 el: '#app',
 data: {
 firstname: '',
 lastname: ''
 },
 methods: {
 displayData: function(msg) {
 alert(msg)
 }
 }
})
vm.$options.methods.displayData('I was called externally!')

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

• Phil H.: Props for an example that runs in the stackoverflow window 👍🏼

Answer 2

export default { 
 methods:{
 my_function(){
 alert('vue function trigger!!!')
 }
 },
 created () { 
 let _this = this 
 window.addEventListener('ready', function() { 
 _this.my_function()
 })
 
 }
}

Here is the perfect example of calling a vue method from javascript.