vue.js form submit did not get the new value of model-bind

Question

I have a form

HTML:

<form ref="myForm" action="/AAA/BBB" method="get">
   <input type="text" hidden="hidden" v-model="myValue" name="myName" />
</form>
<button v-on:click="Send">Click me</button>

JS

new Vue({
   data: {
      myValue: 1
   },
   methods: {
      Send: function() {
         this.myValue = 2;
         this.$refs.myForm.submit();
      }
   }
})

When i click the button, it will send the value: 1

I'm sure that the value was modified before form submit

Answer 1

When you set the value of a data property in a Vue instance's method, any elements bound with v-model will not update until the method has completed.

In your case, the bound input has not updated with the new value of myValue when you access the form and submit it.

To get around this, you can use the Vue.nextTick method, available on each Vue instance via this.$nextTick. This method allows you to pass a callback to execute once the Vue instance's template has finished updating.

In your case, you could do this:

Send: function() {
  this.myValue = 2;
  this.$nextTick(() => {
    this.$refs.myForm.submit();
  });
}