Soy nuevo con Vuejs, estoy procesando datos provenientes de API en el-popover envueltos en una tabla HTML, después de hacer clic en el botón, y dado que son datos grandes, y mientras tanto se está cargando, popover se muestra en blanco. Quiero agregar un ícono de carga, hasta que los datos se representen por completo. Este es mi código:
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>