Submitting a form after changing data in Vue.js?

Question

Vue.js

There is a form:

<form ref="form" method="POST">
  <input type="text" :value="name">
</form>
<a href="#" @click.prevent="submit('Вася')">Инициирует отправку формы</a>

js component:

{
  data{
    name: '',
  },
  methods:{
    submit(name){
      this.name = name;
      // форма отправляется до того, как изменится value инпута
      this.$refs.form.submit();
    }
  }
}

The problem is that the form will submit before the value of the field of this form changes, as a result, the server does not receive the necessary data. It works if you write setTimeout(()=>this.$refs.form.submit(), 0) instead of this.$refs.form.submit() . But what would be the right thing to do in this case? And why does this happen at all? The code with the form and the component is just an example, in a real application everything is more complicated, it is this moment with sending that interests.

Answer 1

It works if you write setTimeout(()=>this.$refs.form.submit(), 0) instead of this.$refs.form.submit() . But what would be the right thing to do in this case?

because