0

Есть форма:

<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) . Но как будет правильнее в этом случае. И почему вообще так происходит? Код с формой и компонентом просто для примера, в реальном приложении все сложнее, интересует именно этот момент с отправкой.

1 ответ 1

0

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

Правильно использовать nextTick в таких случаях

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

поэтому - https://ru.vuejs.org/v2/guide/reactivity.html#%D0%90%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F-%D0%BE%D1%87%D0%B5%D1%80%D0%B5%D0%B4%D1%8C-%D0%BE%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B9

1
  • Может быть использовать v-model и submit засунуть в тело form?
    – Adrug
    23 сен 2018 в 7:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.