Vuejs Accessing a Method from Another Method

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

VueJS access to a variable from another method

The error was due to how this works in JS. The function declaration in the promise was creating a different this context than the main function. The function keyword sets this based on where it is called, whereas arrow functions set this based on where it is defined in the code.

All you need to do is replace the function(response){} declaration in the getAPI promise .then with an arrow function, and it will work fine.

makeCall(){
console.log("Requesting Access Token...");
// Using a relative link to access the Voice Token function
getAPI.get("api/contacts/token/")
.then((response) => {

Try replacing these lines - to use an arrow function in the .then

Accessing a method from another method and passing value in Vue

Use methods rather than computed:

methods: {
    X: function(a,b){
      return(a*b)
    },
    Y: function(e){
      var c = this.X(3,2)
      return(c)
    }
}

VueJs this.method is not a function? How to call a method inside another method in Vuejs?

You have an anonymous call back function that overwrites this keyword, you can either assign this to another variable ref before using it in your anonymous function:

methods: {
    searchLocations: function () {
      var address = this.search
      var geocoder = new window.google.maps.Geocoder()
      var ref = this
//    ^^^^^^^^^^^^^^
      geocoder.geocode({address: address}, function (results, status) {
        if (status === window.google.maps.GeocoderStatus.OK) {
          ref.buscarLojas(results[0].geometry.location)
        //^^^
        } else {
          alert(address + ' not found')
        }
      })
    },
    buscarLojas: function (center) {
      console.log(center)
    }
}

Or use an arrow function:

methods: {
    searchLocations: function () {
      var address = this.search
      var geocoder = new window.google.maps.Geocoder()
      geocoder.geocode({address: address}, (results, status) => {
      //                                                     ^^
        if (status === window.google.maps.GeocoderStatus.OK) {
          this.buscarLojas(results[0].geometry.location)
        } else {
          alert(address + ' not found')
        }
      })
    },
    buscarLojas: function (center) {
      console.log(center)
    }
}

Accessing a method property inside another method in VUE JS

Returning the promise from fetchMA() will allow you to call then() on it so you can wait until this.mA has been set.

fetchMA(id){
    return this.$http.get('apiurl/' + id )
    .then(function(response){
        this.mA = response.body;
    });
},

You can then use it like this in created:

this.fetchMA(id)
.then(() => {
    this.fetchMB(this.mA.mb_id);    
})

It's not really clear what this.mA is from your example. You are declaring it like an array, but accessing it like an object.

Vue - how can i call another method from a callback?

The error is because the scope of 'this' is set to global(window) object in your callback. This can be solved by using arrow function or using a placeholder variable for this. You can try and update your save_key function like this

save_key(){
    const self = this;
    var key_data = {'action': 'save', 'key': this.form.key}

    return axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/save_data/',
        data: key_data,
        withCredentials: true,
        headers: {}
        })
        .then(function (response) {
            self.get_data();
        })

    }

---

Related Topics