Entdecken Sie die Verwendung von Async/Await-Funktionen in Vuejs/Laravel-Ansichten

Question

Hallo, ich versuche mithilfe einer asynchronen Funktion Informationen von einem Controller abzurufen. Ich mache das in einer Komponente:

Ich muss Parameter senden, weil ich ähnliche Antworten auf Mounted() gesehen habe, diese jedoch keine Parameter an die Funktion senden. Wenn ich also die Parameter nicht hinzufüge, funktioniert es nicht.

Bereich anzeigen:

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

Ich muss diese beiden Parameter an die Funktion übergeben: index+1 und post2.branch_office_id

Dann mache ich das im Methodenteil:

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

Es funktioniert, ich meine, wenn Sie die Antwort mit console.log() überprüfen, erhält es einen Wert. Ich weiß, dass ich die asynchrone Wartefunktion nicht in der Ansicht verwenden kann. Deshalb verwende ich eine andere Funktion, um diese Funktion aufzurufen, die Sie sehen können, aber ich weiß nicht, warum ich sie nicht direkt in der Ansicht verwende sagt:

$ [object Promise]

Der Wert wird also nicht angezeigt, also möchte ich wissen, warum? Was stimmt mit dem Code nicht? Ich brauche wirklich Hilfe, danke!

Answer 1

您可以使用 data 属性来存储响应。然后调用该函数发出请求，UI 中绑定到数据的任何内容都将相应更新。

您缺少的部分是 .then(...)，它在 fetch 文档。

例如：

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

现在，在您的 UI 中，检查响应是否已完成返回，v-if="response"，然后根据需要显示它。