Отправка формы после изменения данных на Vue.js?

Question

[websiller]

Есть форма:

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

Компонент js:

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

Проблема в том, что форма отправится до того, как изменится value поля этой формы, в итоге сервер не получает нужных данных. Работает, если в вместо this.$refs.form.submit() написать setTimeout(()=>this.$refs.form.submit(), 0) . Но как будет правильнее в этом случае. И почему вообще так происходит? Код с формой и компонентом просто для примера, в реальном приложении все сложнее, интересует именно этот момент с отправкой.

Answer 1

[0xD34F]

Работает, если в вместо this.$refs.form.submit() написать setTimeout(()=>this.$refs.form.submit(), 0) . Но как будет правильнее в этом случае.

nextTick

И почему вообще так происходит?

потому что