CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Toby Fox
Toby Fox

Reputation: 105

Vue.js component data not being updated after GET

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

Upvotes: 1

Views: 68

Answers (2)

Toby Fox
Toby Fox

Reputation: 105

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

Upvotes: 0

user6748331
user6748331

Reputation:

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

Upvotes: 1

Related Questions