VueJS accessing a method from another method VueJS accessing a method from another method vue.js vue.js

VueJS accessing a method from another method


You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the Vue instance.

Vue API Guide on methods

Within a method on a Vue instance you can access other methods on the instance using this.

var vm = new Vue({  ...  methods: {    methodA() {      // Method A    },    methodB() {      // Method B      // Call `methodA` from inside `methodB`      this.methodA()    },  },  ...});

To access a method outside of a Vue instance you can assign the instance to a variable (such as vm in the example above) and call the method:

vm.methodA();


You can use vm.methodName();

Example:

let vm = new Vue({  el: '#app',  data: {},  methods: {    methodA: function () {      console.log('hello');    },    methodB: function () {      // calling methodA      vm.methodA();    }  },})


let vm = new Vue({  el: '#testfunc',  data:{    sp1: "Hi I'm textbox1",    sp2: "Hi I'm textbox2"  },  methods:{    chsp1:function(){      this.sp1 = "I'm swapped from textbox2"    },    chsp2:function(){      this.sp2 = "I'm swapped from textbox1";      this.chsp1();    },    swapit:function(){      this.chsp2();    }  }});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="testfunc">  <input type="text" :value="sp1"></span>  <input type="text" :value="sp2"></span>  <button @click="swapit()">Swap</button></div>