Im total new to Vue so be kind :)

I have a function that gets the user attributes and based on the attribute i avant to run a graphql query on another function. Both functions are in methods and get called on created life cycle. What i did is to assign it to a variable and render it in the DOM. But i cant get to pass it in the function i want. I tried running each function in different lifecycle hook but it didn't help.

export default defineComponent({
  name: 'IndexPage',
  data: function() {
    return {
      token: '',
      redirectUrl: '',
      authUser: ''
    }
  },
  methods:{
    async setUser() {
      this.authUser = authUser
    },
    async getAtt() {
        Auth.currentAuthenticatedUser()
        .then(data => (this.authUser = data.attributes['custom:learn_url']))
        .catch(err => console.log(err));
    },
    async getUrl() {
      const id = this.authUser; // This is where i want the id to assign the authUser value
      const learnUrl = await API.graphql({
        variables: { id },
        query: getLearnUrl
      });
      this.redirectUrl = learnUrl.data.getLearnUrl.learnUrl;
    }
  },
  created() {
    this.getAtt();
    this.getUrl();
  }
})

CodePudding user response：

I think the problem could lie in your created() method. It's calling an async method getAtt(), so you need to wait for it to complete before you can use the authUser variable you got previously in the getUrl() function, otherwise, it will always be empty.

Change created() to async, and await for the functions.

Example

async created() {
  await this.getAtt();
  await this.getUrl();
}

CodePudding user response：

In addition to Tamas' suggestion you will need to await the result of the Auth.currentAuthenticatedUser() function as well.

export default defineComponent({
  name: 'IndexPage',
  data: function() {
    return {
      token: '',
      redirectUrl: '',
      authUser: ''
    }
  },
  methods:{
    async setUser() {
      this.authUser = authUser
    },
    async getAtt() {
        await Auth.currentAuthenticatedUser() //