VueJS return value from promise in method section of component

Question

The function below set the this.personStatus on all components v-bind. How can I make it update a single comm-person component or multiple comm-person components depending on the result of the axios.post?

The template extract for a person is this:

<comm-person
   v-for="person in people"
   v-show="(!pollActive) || isParticipant(person)"
   :participant="pollActive && isParticipant(person)"
   :status="personStatus"
   :key="person.id"
>
<div class="checkbox-wrap"><input :disabled="pollActive" :value="person" v-model="selectedPeople" type="checkbox"></div>
<div @click="togglePerson(person)" class="name">{{person.given_name}} {{person.family_name}}</div>
<div class="phone-number">{{person.phone}}</div>
</comm-person>

E.G: :status="personStatus"

data() {
    return {
        pollText: '',
        primaryButton: {
            border: `2px solid ${iiColor('ii-green')}`,
        },
        secondaryButton: {
            border: `2px solid ${iiColor('ii-grey')}`,
        },
        people: [],
        safeUsers: [],
        unsafeUsers: [],
        selectedPeople: [],
        polledPeople: [],
        pollActive: false,
        messages: [],
        msgType: 'SMS',
        personStatus: '?'
    };
},
..
..
methods: {
getStatus(person) {

        axios.post(`${config.iiApiUrl[process.env.NODE_ENV]}/person/find`, {
            id: person.id,
        }).then((resp) => {

            console.log('handle response...');
            console.log(resp.data.ref);

            if(resp.data.ref != null) {

              if (this.safeUsers.includes(resp.data.ref)) {
                  console.log('person is safe');
                  this.personStatus = 'safe';
              }
              if (this.unsafeUsers.includes(resp.data.ref)) {
                  console.log('problem with person');

                  this.personStatus = 'safe';
              }
            }
            else {
              return '?';
            }
        });
    },
}

But the this.personStatus from the axios.post call updates all the components. How can I make it update one or two depending on the result?

Please help!!

kmc059000 · Accepted Answer · 2017-12-09 23:45:20Z

3

First of all post returns a promise and it is performed asynchronously. getStatus will return before the anonymous function you pass in to post will be called. It cannot return the string value. For the caller of getStatus() to get the value of the returned string, you must use then(). I suggest you research asynchronous programming and promises in javascript a bit further to understand callbacks and when they are run.

Secondly, you typically should not bind a prop to the result of a method/function. Props almost always should be bound to a data field or computed.

I suggest you change the post handler to set a data field and bind to that instead.

:status="personsStatus"

data: {
    return {
        person: ??, //i dont know where this comes from
        personStatus: 'unknown', //some default value. maybe '?'
    };
},
mounted() {
    this.loadStatus(this.somePerson);
},
methods: {
    loadStatus(person) {
        axios.post(...)
            .then((resp) => {
                //your more complex logic here, 
                //but instead of returning a string, 
                //set the personStatus field like the following:
                this.personStatus = 'safe';
            });
    }
}

This may require you to create a child component to do this work if you have multiple person instances.

edited Dec 9, 2017 at 23:45

answered Dec 9, 2017 at 23:38

kmc059000

3,0882 gold badges26 silver badges27 bronze badges

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

5 Comments

Berni Over a year ago

I need to set it on the person. can i call you?

Berni Over a year ago

Thanks for the advice - i'm nearly there with getting it fixed.

Berni Over a year ago

how do i do this for multiple persons?

Berni Over a year ago

But in the case of multiple persons?

kmc059000 Over a year ago

I suggest you create a new child component which takes a single person object as a prop and executes the request in the child component. The parent component would then have one or more instances of the child component, either through a v-for or by declaring multiple components.

Collectives™ on Stack Overflow

VueJS return value from promise in method section of component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related