Having an issue with submitting a form using the following function:
methods: {
submit_form: function () {
this.drawing = dat.toImage();
this.$refs.my_form.submit()
}
}
The drawing variable is supposed to be assigned to an input within the my_form like so:
<input type="text" name="doodle" :value="drawing">
Unfortunately, it seems that the form is being submitted before this.drawing is updated with the value of dat.toImage(). Splitting the function into two separate methods seems to solve the issue:
methods: {
submit_form: function () {
this.$refs.my_form.submit()
},
set_drawing: function () {
this.drawing = dat.toImage()
}
}
Executing set_drawing() and then submit_form() in sequence works correctly. It appears that combining them in a single function causes the form to be submitted prior to the update of this.drawing.
Any suggestions on why this behavior occurs and how to resolve it?
UPDATE:
The workaround provided does not seem to work either, as the form is still submitted with a null value. Setting up a wait condition also did not yield the desired result:
data: {
drawing: null
}
methods: {
submit_form: function () {
this.drawing = dat.toImage();
while (this.drawing == null) {
false
}
this.$refs.my_form.submit()
}
}
It appears that regardless of the initial value of drawing, that same value gets sent with the form. Even though I can see the value changing on the website upon submission, the loop never ends.
Note that the .toImage method is from the atrament.js library.
To handle the submit event, the following approach is used:
<form method="POST" class="model-form" v-on:submit.prevent="submit_form()" ref="my_form">