Vue.js component data not being updated after GET

Question

I have a component that contains a default object, and on create GETs a populated object. When trying to bind this.profile to the new object it seems to get the correct data in the method but the change is not pushed back to other uses of this.profile. Is there a way to force this change to be picked up by the rest of the script?

export default {
data() {
    return {
        profile: {
            firstName: 'Seller First Name',
            surname: 'Seller Surname',
            username: '',
            biography: 'Seller biography.',
            phoneNumber: 'Seller Phone Number',
            emailAddress: 'Seller Email',
            profilePhotoUrl: '',
            testimonials: []
        }
    };
},

components: {
    ProfileSummary,
    Biography,
    TestimonialList,
    PaymentsenseCompany
},

created() {
    console.log('created');
    this.getProfile(this.$route.params.sellerUsername);
},

methods: {
    getProfile(sellerUsername) {
        axios.get('http://fieldsellerprofileapi.azurewebsites.net/api/fieldseller/' + sellerUsername)
        .then(function(response) {
            this.profile = Object.assign({}, response.data);
            Vue.nextTick(() => {
                console.log('after', this);
            });
        }.bind(this))
        .catch(e => {
            console.log(e);
            // location.replace('/404');
        });
    }
},

user6748331 · Accepted Answer · 2017-11-10 14:47:01Z

1

Im not sure, but try this:

getProfile(sellerUsername) {
  axios
    .get('http://fieldsellerprofileapi.azurewebsites.net/api/fieldseller/' + sellerUsername)
    .then(r => this.profile = r.data)
    .catch(e => console.log(e))
}

answered Nov 10, 2017 at 14:47

user6748331

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

Comments

Toby Fox · Accepted Answer · 2017-11-19 19:40:51Z

0

So it turns out the issue wasn't that the values weren't being updated. They were being saved fine, I was just trying to access them in a child component which was not being updated with the parent for some reason. The changes were not propagating down to the children... This may be of use researching if you have the same issue.

Thanks

answered Nov 19, 2017 at 19:40

Toby Fox

1054 silver badges11 bronze badges

Collectives™ on Stack Overflow

Vue.js component data not being updated after GET

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related