コンポーネントのメソッドセクションのpromiseからの戻り値

Question

以下の関数は、すべてのコンポーネントのthis.personStatusをv-bindに設定します。 axios.postの結果に応じて、1つのcomm-personコンポーネントまたは複数のcomm-personコンポーネントを1つ更新するにはどうすればよいですか？

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

例えば：: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 '?'; 
      } 
     }); 
    }, 
} 

しかしaxios.postコールのアップデートすべてのコンポーネントからthis.personStatus

人のためのテンプレートの抽出物はこれです。どのように私は結果に応じて1つまたは2つを更新することができますか？

助けてください！

Answer 1

まず、postは約束を返し、非同期に実行されます。 getStatusは、あなたが渡す匿名関数の前に返され、postが呼び出されます。文字列の値を返すことはできません。 getStatus()の呼び出し元が返される文字列の値を取得するには、then()を使用する必要があります。私はあなたが非同期プログラミングを研究し、javascriptで、コールバックを理解するために、そしてそれらがいつ実行されるかを約束することをお勧めします。

第2に、通常、メソッド/関数の結果に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のインスタンスを持っている場合、これは、この作業を行うには、子コンポーネントを作成する必要があります。