Vuejs/Laravel ビューでの async/await 関数の使用法を調べる

Question

こんにちは、非同期関数を使用してコントローラーから情報を取得しようとしています。これをコンポーネントで実行します。

Mounted() で同様の回答を見たことがあるため、パラメータを送信する必要がありますが、パラメータは関数に送信されないため、パラメータを追加しないと機能しません。

セクションを表示:

<みんな>
  <tr v-for="(投稿, インデックス) in last_month_day" v-bind:index="インデックス">
    <td>{{ インデックス 1 }}</td>
    <td v-for="(post2,index2) in Branch_office_posts" v-bind:index="index2">
      $ {{ getTotalIncomes(index 1, post2.branch_office_id) }}
    </td>
  </tr>
</tbody>

これら 2 つのパラメーターを関数に渡す必要があります:index 1 と post2.branch_office_id

次に、メソッド セクションでこれを行います。

メソッド: {
  async TotalIncomeData(日, 支店_オフィス_id) {
    const response = await fetch('/api/collection/total/' day '/' Branch_office_id '?api_token=' App.apiToken)
    応答を返します。
  }、
  getTotalIncomes(日, 支店_オフィス_id) {
    これを返します。TotalIncomeData(日, 支店_オフィス_id);
}、

それは機能します。つまり、console.log() を使用して応答をチェックすると、値が取得されます。 ビュー内で async await 関数を使用できないことはわかっています。そのため、別の関数を使用して内部でこの関数を呼び出すのですが、なぜそれをビュー内で直接使用しないのかわかりません。言う:

$ [オブジェクト Promise]

値が表示されないのですが、その理由を知りたいのですが?コードの何が間違っているのでしょうか?本当に助けが必要なんです、ありがとう！

Answer 1

#data 属性を使用して応答を保存できます。次に、関数が呼び出されてリクエストが行われ、データにバインドされている UI 内のすべてのものがそれに応じて更新されます。

不足している部分は

.then(...) です。これは fetch ドキュメントに記載されています。 ＃＃＃例えば：＃＃＃

データ: () => ({ 応答: null、 })、 メソッド: { fetchData() { fetch(`/api/collection/total/${day}/${branch_office_id}?api_token=${App.apiToken}`) 。それから（ (応答) => { this.response = 応答; } ); }、 },

ここで、UI で、応答が戻り終わったかどうかを確認し (

v-if="response"

)、必要に応じて表示します。