I have a parent component and a child component set up as follows:
.
├── Index.vue (Parent)
└── _GetShipment.vue (Child)
Within Index.vue, I am using Office.js's getAsync method to retrieve the content of an email body:
<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>
The code snippet above checks the email body content for a specific regular expression match. If a match is found, it is added to the array shipments.
Currently, when only one match is found, it will be displayed in the child component named _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>
The process of fetching the email body content and retrieving details using fetch() is functioning properly.
However, the loading fallback specified in the Suspense component is not triggering as expected. Instead, the page remains blank until the fetch operation is completed.
Why is the #fallback section not rendering?