Form value binding not updating fast enough

[sebastiaanluca]

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.

[Yunfeng]

I thought there is no way to resolve the problem.

In this situation, I manually write param's value for ajax.

[sebastiaanluca]

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?

[defcc]

Use vm.$nextTick

this.myValue = 'a value'

this.$nextTick(function () {
  $(this.$el).parent('form').submit()
})