Terokai penggunaan fungsi async/menunggu dalam paparan Vuejs/Laravel

Question

Hai, saya cuba mendapatkan maklumat daripada pengawal menggunakan fungsi async, saya melakukan ini dalam komponen:

Saya perlu menghantar parameter kerana saya telah melihat jawapan yang serupa dengan Mounted() tetapi mereka tidak menghantar parameter ke fungsi jadi jika saya tidak menambah parameter, ia tidak akan berfungsi.

Lihat Bahagian:

<tbody>
  <tr v-for="(post, index) in last_month_day" v-bind:index="index">
    <td>{{ index+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>

Saya perlu menghantar dua parameter ini ke fungsi: index+1 dan post2.branch_office_id

Kemudian saya lakukan ini di bahagian kaedah:

methods: {
  async TotalIncomeData(day, branch_office_id) {
    const response = await fetch('/api/collection/total/'+day+'/'+branch_office_id+'?api_token='+App.apiToken)
    return response;
  },
  getTotalIncomes(day, branch_office_id) {
    return this.TotalIncomeData(day, branch_office_id);
},

Ia berfungsi, maksud saya jika anda menyemak respons menggunakan console.log() ia mendapat nilai. Saya tahu saya tidak boleh menggunakan fungsi async await dalam paparan, itulah sebabnya saya menggunakan fungsi lain untuk memanggil fungsi ini di dalamnya yang anda boleh lihat, tetapi saya tidak tahu mengapa saya tidak menggunakannya secara langsung dalam paparan, ia berkata:

$ [object Promise]

Jadi ia tidak menunjukkan nilai jadi saya ingin tahu mengapa? Apa yang salah dengan kod itu? Saya sangat memerlukan bantuan, terima kasih!

Answer 1

Anda boleh menggunakan atribut data untuk menyimpan respons. Fungsi tersebut kemudiannya dipanggil untuk membuat permintaan, dan apa-apa sahaja dalam UI yang terikat pada data akan dikemas kini dengan sewajarnya.

Bahagian yang anda hilang ialah dokumentasi .then(...)，它在 fetch.

Contohnya:

data: () => ({
  response: null,
}),
methods: {
  fetchData() {
    fetch(`/api/collection/total/${day}/${branch_office_id}?api_token=${App.apiToken}`)
    .then(
      (response) => { this.response = response; }
    );
  },
},

Sekarang, dalam UI anda, semak untuk melihat sama ada respons telah selesai dikembalikan, v-if="response" dan kemudian paparkannya jika perlu.