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');
        });
    }
},

score 1 · Answer 1 · answered Nov 10 '17 at 14:47

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))
}

score 0 · Accepted Answer · answered Nov 19 '17 at 19:40

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

Vue.js component data not being updated after GET

2 Answers2