0

Hoping you can help.

Pretty new to vuejs and axios and struggling to get this to work.

I am able to assign a value from axios to my sources variable and can access this in my template but for some reason cannot console.log it. The console.log always returns as the default value (empty array).

I've reduced my code to the key parts:

data() {
    return {
        sources: [],
    }
},

mounted(){ 
    this.getSources();
    console.log(this.sources);
},

//I use the arrow syntax so it should be binding 'this'

    getSources() {
        axios.get('/api/settings/sources').then((response) => {
            this.sources = response.data;
        });
    },

//The @ is laravel specific
<news-list inline-template v-cloak>
    @{{ sources }}
</news-list>

So just to reiterate I can access the response data from within the inline-template but the console.log in mounted doesn't reflect the new data. I don't get any errors.

Not sure why this is happening or how I go about fixing it :(

Thanks for your help, really appreciate it.

fl3x7
  • 3,723
  • 6
  • 26
  • 37
  • The result is available asynchronously, so don't expect you can immediately access it. The `then` callback has not yet executed at that moment. Once you use `then`, you need to keep using it to get access to the data. – trincot Jun 23 '17 at 17:52
  • Because the call to get your data is asynchronous, the console.log in the mounted lifecycle event happens *before* the asynch call is complete. – Bert Jun 23 '17 at 17:52
  • Doh, that makes perfect sense. Thank you for the clarification. – fl3x7 Jun 23 '17 at 17:56

0 Answers0