How to access object from mounted hook in Vuejs

Question

I want to access data object in mounted hook, but when I try to access the data it will throw undefine in the console.

This is my source code

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  read() {
    axios.get('/api/get/details').then(({ data }) => {
      this.channel= data;

    })
      .catch((err) => console.error(err));
  },
},



  mounted() {

      this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

but when I console this.channel.data.userid I gat 'undefine'

Does this answer your question? How do I return the response from an asynchronous call? — Estus Flask
– Estus Flask, Commented May 7, 2020 at 17:27

A. L · Accepted Answer · 2020-05-07 16:03:40Z

1

Your code is asynchronous, you meaning that console.log does not wait until this.read() is finished. Changing it to the following should work.

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  async read() {
    const { data } = await axios.get('/api/get/details')
    this.channel = data;
  },
},



  async mounted() {

      await this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

Read up more on async and Promise

answered May 7, 2020 at 16:03

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hans Felix Ramos · Accepted Answer · 2020-05-07 16:03:49Z

0

You are having a synchronous problem. Make your functions asynchronous and wait to end it.

export default {

  data() {
    return {
      channel: {},
      subscription: {},
    }
  },

  methods: {

    async read() {
      await axios.get('/api/get/details').then(({ data }) => {
        this.channel= data;
      })
      .catch((err) => console.error(err));
    },
  },

  async mounted() {

      await this.read();

      console.log(this.channel.data.userid);

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
      });
  }
}

answered May 7, 2020 at 16:03

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Collectives™ on Stack Overflow

How to access object from mounted hook in Vuejs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related