Say I have a simple component with nothing but a mounted
method that does the following:
this.myValue = 'a value'
$(this.$el).parent('form').submit()
My component html looks like this:
<form action="http://…">
<input type="text" :value="myValue">
</form>
As you can see I'm using jQuery to submit the form and if both assigning the value and submitting the form happen in the same function, __empty data is submitted__. I can work around this by using a timeout with no delay, but of course that's not ideal.
setTimeout(() => {
$(this.$el).parent('form').submit()
})
This also happens when it's not in the mounted method, but for instance on blur out
, so it has nothing to do with page load or delays. Same goes for :value
versus v-model
.
I don't know much of the internals of Vue or JS, but I presume it's because it hasn't been able to assign the values yet. Using a timeout, the submit occurs on the next tick.
I thought there is no way to resolve the problem.
In this situation, I manually write param's value for ajax.
Has this issue been posted before then? Couldn't find anything.
Well, in my case, I just want to submit the form automatically including the page refresh, don't want to (and can't) send it via Ajax. If there's no solution, perhaps a mention in the docs would be nice to have?
Use vm.$nextTick
this.myValue = 'a value'
this.$nextTick(function () {
$(this.$el).parent('form').submit()
})
Most helpful comment
Use vm.$nextTick