My data model involves a Site with coordinates that can be linked to an Observation. When a user submits both a Site and Observations, they are stored in IndexedDB using localForage. The Outbox component handles posting these to the server when the user is online.
The issue I'm facing is that while Sites are posted correctly, Observations are being posted twice. I lack experience with async/await and try/catch. Below is the code for the submit button:
<b-button
v-if="this.obsOutbox.length"
@click.once="syncDb"
variant="dark"
size="lg"
class="m-5 w-75"
>
<b-spinner small v-if="syncing"></b-spinner> Upload data
</b-button>
And here is the script snippet for the component:
<script>
import api from '@/api.js'
import GlobalComponents from '@/globalComponents.js'
import { contextMixin } from '@/mixins/context.js'
import localForageMixin from '@/mixins/localForageMixin.js'
import onlineMixin from '@/mixins/onlineMixin.js'
export default {
title: 'Outbox',
name: 'Outbox',
// Other script contents omitted for brevity...
}
</script>