I'm triggering a submit event from a parent component, which emits an image data-url and a body text from two child components to the parent:
<ImgUploadComponent :triggerEmit="state.submit" @emitImage="getImage"/>
<EditorComponent :triggerEmit="state.submit" @emitBody="getBody"/>
The image and body are fetched with these functions:
const getImage = async (image) => {
form.image = await image
// arrives after storeRecord
}
const getBody = async (body) => {
form.body = await body
// arrives before storeRecord
}
and sent to the database in this function:
const storeRecord = async () => {
state.submit = true
await getImage
await getBody
console.log(form.image) // returns undefined
form.post('/admin/posts')
}
Problem is that the body arrives before form.post is sent but the image arrives after. When I wrote this function, it used to work but now it doesn't and I can't figure out why. How do you do it right?
Thanks to @Estus' suggestion, I was able to use a watcher to solve my problem:
const storeRecord = () => {
state.submit = true
watch(() => form.image, () => {
form.post('/admin/kreationen')
})
}
const getImage = (image) => {
form.image = image
}
const getBody = (body) => {
form.body = body
}