VueJS accessing a method from another method

Question

I'm using VueJS to make a simple enough resource management game/interface. At the minute I'm looking to activate the roll function every 12.5 seconds and use the result in another function. At the moment though I keep getting the following error:

Uncaught TypeError: Cannot read property 'roll' of undefined(...)

I have tried:

• app.methods.roll(6);
• app.methods.roll.roll(6);
• roll.roll()
• roll()

but can't seem to access the function. Anyone any ideas how I might achieve this?

methods: {

  // Push responses to inbox.
  say: function say(responseText) {
    console.log(responseText);
    var pushText = responseText;
    this.inbox.push({ text: pushText });
  },

  // Roll for events
  roll: function roll(upper) {
    var randomNumber = Math.floor(Math.random() * 6 * upper) + 1;
    console.log(randomNumber);
    return randomNumber;
  },

  // Initiates passage of time and rolls counters every 5 time units.
  count: function count() {
    function counting() {
      app.town.date += 1;
      app.gameState.roll += 0.2;

      if (app.gameState.roll === 1) {
        var result = app.methods.roll(6);
        app.gameState.roll === 0;
        return result;
      }
    }

    setInterval(counting, 2500);

    ...

    // Activates the roll at times.
  }
}

Solution 1

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();

Solution 2

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();
    }
  },
})

Solution 3

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>

Comments

[Wing]

Where are you trying to access the roll method? Is it inside the same component? In a child component? A parent component? Sibling? Or some other place with a complicated relationship?

[Jackanapes]

No components at the moment at all. I activate the count method on page load, and inside the count method I am looking to activate the roll method. The call is inside of the if statement in the counting() function. Everything at the moment is in the root scope. Will be refactoring to components once I have the barebones functionality complete.

[Sumit Murari]

i'm able to access the data using this, but not methods. Has somthing changed in vuejs 2.0 ?

[Wing]

@SumitMurari: how are you defining the method on the component? The above answer is valid for Vue 2.

[Sumit Murari]

I was making mistake, I made an ajax call and was trying to access app methods via this, and var self = this; self.method() worked for me.

[Wing]

@SumitMurari: I see. Also don't forget that, if your project allows, arrow functions have lexical this, meaning do you don't have to do var self = this;.

[Sumit Murari]

Yes, I googled more and settled with it(arrow function), arrow function doesn't create new scope hence i can use this. Thanks for help.

[Michael Plautz]

I found in Vue 2.0 that using methodB() { this.methodA(); } works whereas methodB: () => { this.methodA(); } does not. I am not sure if this is a fluke, but when I changed it from the latter to the former, my errors went away.

[Wing]

@MichaelPlautz: I believe @SumitMurari was trying to access a component's methods in a callback or Promise handler (they mentioned they were attempting to call a method after making an AJAX call). This is what the arrow function usage was referring to. In your case, it is not a fluke. Arrow functions cannot have their this context rebound. As a result Vue cannot correctly set the this context to allow you to access other properties/methods of the component.

[Wing]

@MichaelPlautz: Just noticed Vue's documentation mention what I've explained above as well: Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.