Vue: Ensuring one method finishes executing before triggering the next one

Question

Vue: Ensuring one method finishes executing before triggering the next one

I've implemented two methods in my Vue instance;

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: function() {
 this.getId()
 this.foo()
 }
})

The console.log() displays null because it executes before the response from getId() has a chance to set the id value. This can be observed using the Vue developer tools, where the id is correctly displayed rather than as null.

Is there a way to ensure that getId() sets the value before calling this.foo()?

javascript vue.js

Answer 1

Answer №1

If you want to achieve this, one approach is using JavaScript promises. The async/await syntax provides a straightforward way to do it.

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: async function() {
   await this.getId()
   this.foo()
 }
})

Alternatively, you can opt for the traditional method as well.

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: function() {
   this.getId().then(() => this.foo())
 }
})

Answer 2

If you want to achieve this, one approach is using JavaScript promises. The async/await syntax provides a straightforward way to do it.

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: async function() {
   await this.getId()
   this.foo()
 }
})

Alternatively, you can opt for the traditional method as well.

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
   getId: function() {
     return axios.get('url')
     .then(response => response.data)
     .then(id => this.id = id)
     .catch(error => console.log(error))
   },

   foo: function() {
    console.log(this.id)
   }
 },
 mounted: function() {
   this.getId().then(() => this.foo())
 }
})

Answer 3

Answer №2

Discover numerous possibilities by exploring different avenues. I recommend delving into Promises in JS for an enlightening experience. However, a straightforward answer can be provided here:

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
       getId: function(callback) {
         return axios.get('url')
         .then(response => response.data)
         .then((id) => { 
               this.id = id
               callback()
          })
         .catch(error => console.log(error))
       },

       foo: function() {
        console.log(this.id)
       }
  },
  mounted: function() {
     this.getId(() => {
        this.foo()
     })
  }
})

Answer 4

Discover numerous possibilities by exploring different avenues. I recommend delving into Promises in JS for an enlightening experience. However, a straightforward answer can be provided here:

const app = new Vue({
  el: '#app',
  data: {
   id: null
  },
  methods: {
       getId: function(callback) {
         return axios.get('url')
         .then(response => response.data)
         .then((id) => { 
               this.id = id
               callback()
          })
         .catch(error => console.log(error))
       },

       foo: function() {
        console.log(this.id)
       }
  },
  mounted: function() {
     this.getId(() => {
        this.foo()
     })
  }
})

Vue: Ensuring one method finishes executing before triggering the next one

Answer №1

Answer №2

Similar questions

A guide on adjusting a function to pause execution until a line is complete

What is the best way to remove a selected item from an array in Vuejs when it has been clicked

Uploading files with the help of Formik and the Material-UI stepper component

Leveraging NextJS to perform server side rendering by injecting parameters from a caller component

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Can you explain the variation between a standard javascript integer and one obtained from jquery.val()?

Preventing access to drives and desktop until the mandatory HTML form is completed

Having trouble locating the bootstrap import statement

JavaScript function to close mobile menu when menu item is clicked

Is it possible for AJAX to access files with unique extensions?

Using PHP functions in an AJAX request

Pause and continue scrolling through the page with the push of a button

Continuous Scrolling with Callback Function in jQuery

Unable to retrieve data from the JSON object

What is the process for obtaining all of the options from a jQuery datepicker in order to create a new datepicker with identical settings?

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

Modify the button input value within a PHP script

Add a npm module without type definitions

The ZIP file downloaded from NodeJS is corrupted and cannot be opened