VueJS accessing a method from another method
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>
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();