Tengo debajo de dos componentes (padre e hijo)
. ├── Index.vue (Parent) └── _GetShipment.vue (Child) En Index.vue , estoy tratando de obtener el contenido del cuerpo del correo electrónico usando getAsync de Office.js:
<script> import Shipment from './_GetShipment.vue'; import { ref, defineComponent } from 'vue'; export default defineComponent({ setup() { const shipments = ref([]); Office.context.mailbox.item.body.getAsync( "text", function (result) { if (result.status === Office.AsyncResultStatus.Succeeded) { let matches = result.value.match(/S\w{3}\d{8,9}/ig); if(matches){ shipments.value = matches; } } } ); return { shipments, } }, components: { Shipment, }, }) </script> <template> <div> <div v-if="shipments.length === 1"> <Shipment :id="shipments[0]" /> </div> </div> </template> Lo anterior verifica el contenido del cuerpo del correo electrónico para ver si hay una coincidencia de expresión regular. Si lo hay, agregará la coincidencia a una matriz de shipments .
Actualmente, si solo se encuentra una coincidencia, se representará en el componente secundario llamado _GetShipment :
<script> import { ref, Suspense } from 'vue'; import route from '../../../../vendor/tightenco/ziggy/src/js'; export default { props: ['id'], async setup(props) { const shipment = ref(); await fetch(route('getShipment', {id : props.id})) .then(response => response.json()) .then(data => shipment.value = data); return { shipment }; } }; </script> <template> <div> Viewing shipment {{ id }}: <br /> <Suspense> <template #fallback> Loading... </template> <pre>{{ shipment }}</pre> </Suspense> </div> </template> Obtener el contenido del cuerpo del correo electrónico funciona bien, y lo mismo ocurre con obtener los detalles mediante fetch() .
Sin embargo, el respaldo de carga de Suspense no se activa. Al cargar la página, simplemente está en blanco hasta que se completa la fetch .
¿Por qué no se representa el #fallback ?
Está aplicando incorrectamente <Suspense> en el mismo componente que tiene una async setup . El <Suspense> debe estar en un ancestro (es decir, cualquier componente entre la raíz y el componente que usa la async setup ).
El hecho de que su componente se represente sin errores implica que ya tiene un <Suspense> en un ancestro, por lo que la solución aquí es eliminar el que está dentro de su componente de async setup , o mover el <Suspense> a un contenedor que represente su respaldo .