Vue js Set data after ajax call

Question

I have a place for displaying user info, when page refreshed i read user info from an ajax call and set user info data.but because of Time-consuming process of axios call Data setup is performed after the DOM rendering.

HTML :

<div> {{user.name}} </div>

vue.js :

data: function(){
 return {
   user: {},
   }
},

methods: { 

getUserInfo() {
   axios.post(laroute.route('link'), data).then((response) => {
      this.$set(this, 'user', response.data.user);
        },
 },

 mounted() {

        this.getUserInfo();
    }

after refreshing page i got this error:

"TypeError: Cannot read property 'name' of undefined"

getUserInfo() should under methods: { getUserInfo() { ... } } — joaner
– joaner, Commented Jun 25, 2018 at 10:31
The code you posted is incomplete, cannot help you find the reason. and you should check response.data.user, maybe is undefined — joaner
– joaner, Commented Jun 25, 2018 at 10:35
What is data property in axios.post(laroute.route('link'), data)? Can your please post stackoverflow.com/help/mcve. — Harshal Patil
– Harshal Patil, Commented Jun 25, 2018 at 11:05
@joaner : Both data sent from axios and response data is correct — Mostafa Abedi
– Mostafa Abedi, Commented Jun 25, 2018 at 11:23

AythaNzt · Accepted Answer · 2018-06-25 13:42:02Z

1

I cant add a comment. You can try to change:

mounted for created and this.$set(this, 'user', response.data.user); for user = response.data.user

Anyway, can you console.log the result of call?

answered Jun 25, 2018 at 13:42

AythaNzt

1,0576 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Vue js Set data after ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related