I am new with Vuejs, I am rendering data coming from API in el-popover wrapped in a HTML table, after clicking button, and since its a large data, and meanwhile is loading, popover is displaying blank. I want to add loading icon, till data is entirely rendered. This is my code:
requestResponse(id) {
ApiService.get("/myapi"+id)
.then((data) => {
this.loading=true;
this.displayData2(data.data.data);
})
.catch((error) => {
this.loading=true;
this.apiDateRangeError = JSON.stringify(
error.response.data["errors"][0]["errorMessage"]
);
ElNotification({
title: "Error",
message: JSON.stringify(
error.response.data["errors"][0]["errorMessage"]
),
type: "error",
duration: 3000,
position: "top-right",
});
});
}<el-popover
placement="bottom"
title="Details"
:width="600"
trigger="click"
>
<table
class="table table-striped"
style="table-layout: fixed; width: 100%"
>
<thead>
<tr>
<th scope="col" style="width: 50%">Request Payload</th>
<th scope="col" style="width: 50%">Response Payload</th>
</tr>
</thead>
<tbody>
<tr>
<td style="word-wrap: break-word;">
<pre
v-html="JSON.stringify(this.apiData['requestPayload'], null, 2)"
></pre>
</td>
<td style="overflow-wrap: break-word; border-left: 1px solid grey;">
<pre
v-html="JSON.stringify(this.apiData['responsePayload'], null, 2)"
></pre>
</td>
</tr>
</tbody>
</table>
<template #reference>
<el-button type="btn btn-sm primary"
@click="requestResponse(customer.id)"
>Log Details</el-button
>
</template>
</el-popover>