Question

以下功能在所有组件this.personStatus上设置v-bind。如何根据comm-person的结果更新单个comm-person组件或多个axios.post组件？

一个人的模板摘录是这样的：

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

但this.personStatus调用中的axios.post会更新所有组件。如何根据结果更新一个或两个？

请帮助!!

Answer 1

首先，post返回一个promise，它是异步执行的。 getStatus将在您传入post的匿名函数被调用之前返回。它不能返回字符串值。要使getStatus()的调用者获取返回字符串的值，您必须使用then()。我建议你在javascript中进一步研究异步编程和承诺，以便了解回调以及它们何时运行。

其次，您通常不应该将prop绑定到方法/函数的结果。道具几乎总是应该绑定到数据字段或计算。

我建议您更改帖子处理程序以设置数据字段并将其绑定到该字段。

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

如果您有多个person个实例，这可能需要您创建一个子组件来完成这项工作。

VueJS在组件

1 个答案: