Как в Vue прервать отправку формы по нажатию на enter на input?

Question

[Игорь Безлепкин]

Есть форма. В нем поле autocomplete. Так вот когда на нем фокус и нажимаешь enter, форма улетает. Как это дело можно прервать?

<form class="form form-settings" @submit.prevent="send">
  <input type="text" v-model="city" />
</form>

methods: {
  send: function () {
  }
}

Comments

[0xD34F]

А как насчёт более полного примера вашего кода? Желательно, в песочнице.

[anlamas]

попробуй stop вместо prevent

[Игорь Безлепкин]

Если один Input то форма отправляется
https://jsfiddle.net/4qvy80z1/1/

Если два input то нет
https://jsfiddle.net/eywraw8t/65222/

ххмммм

[0xD34F]

Игорь Безлепкин, так всё-таки - в чём проблема? В тексте вопроса вы говорите про клик, но в примере по ссылке никакой отправки по клику не происходит.

[Игорь Безлепкин]

Блин, я имел в виду ентером :) не дописал, сорри!

[0xD34F]

Игорь Безлепкин, исправьте текст вопроса, чтобы не вводить людей в заблуждение.

Answer 1

[0xD34F]

Дело в том, что если в форме присутствует всего одно поле ввода, то, согласно спецификации, нажатие enter'а должно приводить к отправке формы:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

Что делать? Блокировать действие по умолчанию при нажатии enter'а, добавить input'у @keypress.enter.prevent.

Comments

[Игорь Безлепкин]

Супер! Работает!