VueJS обрабатывает отправку формы при нажатии Enter

#vue.js #vuejs2 #vuetify.js

Вопрос:

У меня есть опыт работы в Angular. Запуск с vue был для меня нормальным опытом, пока я не столкнулся с проблемой, над которой разработчики VueJS, похоже, нагадили и скрылись под ковром. Как мы можем создать форму, в которой пользователь может нажать enter из поля ввода, чтобы отправить форму

Это было серьезно разочаровывающим.

и, пожалуйста, если вы знаете ответ, будьте любезны опубликовать его и в официальной документации vue.

* Примечание: мой обходной путь: Я использовал v-on:keydown.enter.prevent='loginUser' для каждого поля ввода. есть ли какой-либо способ не использовать его таким образом (для каждого поля ввода).

1. Enter отправляет a <form> , если он содержит a <button> ( <button> потому type что по умолчанию submit используется значение inside <form> ). Vue может быть «серьезно разочаровывающим» для тех, у кого нет средних знаний HTML и JS. Это четко указано в их начале работы.

2. К сожалению, переход с Angular на Vue не так прост, как кажется на первый взгляд. Потому что Vue довольно прозрачен с тем, что находится под капотом, в то время как Angular, как известно, непрозрачен. Angular требует, чтобы вы, прежде всего, знали Angular. Vue требует, чтобы вы знали HTML, JS и CSS, прежде всего, в этом конкретном порядке. Другими словами, Angular скрывал от вас поведение DOM, и теперь вам нужно его изучить.

3. Редактирование и проклятие не помогают вашему делу

Ответ №1:

button Как и в случае с типом submit , форма отправляется при Enter нажатии клавиши на любом вводе.

Явная привязка не требуется keypress .

 new Vue({
      el: '#app',
      data() {
        return {
          title: "Vue 2 -Form submission on Enter",
          formInput:{
            fname:'',
            lname:'',
            gender:'male'
          }
        };
      },
      methods:{
      onSubmit(){
        console.log('submitted', this.formInput)
      }
      }
    })

 .form{
display:flex;
flex-direction:column;
gap:10px;
max-width:200px
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app"><h2>{{title}}</h2>
    <form v-on:submit.prevent="onSubmit" class="form">
    <input v-model="formInput.fname"  @keydown.enter.prevent placeholder="first name"/>
    <input v-model="formInput.lname" placeholder="last name"/>
     <div>
     <input v-model="formInput.gender" name="gender" placeholder="Gender" type="radio" value="male"/>male
     <input v-model="formInput.gender" name="gender" placeholder="Gender" type="radio" value="female"/>Female
     </div>
    <button type="submit">Submit</button>
    <pre>{{formInput}}</pre>
    </form>
    
    </div>

Развернуть фрагмент

Ответ №2:

Я бы настоятельно рекомендовал вам ознакомиться с этой страницей в документации VueJS.

В нем объясняется, как устанавливать события для определенных взаимодействий. Например, вы можете вызвать вызов функции при нажатии клавиши Enter в поле ввода, выполнив следующее:

 <input type="text" @keyup.enter="submit">

Это вызовет submit() метод при Enter нажатии и отпускании клавиши (keyup). При нажатии вы можете использовать keydown вместо.’

На самом деле, пример, который я взял, взят непосредственно из этого раздела на странице, на которую я ссылался выше.

РЕДАКТИРОВАТЬ: чистый HTML-способ сделать это — установить ваш input тип как submit , что позволит Enter отправлять форму

1. Спасибо за ответ в Angular, мы используем это для отправки формы: <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()"> кнопка: ` <button class=»button» type =»submit»> Покупка </button> ` Я хотел что-то вроде этого. Нилеш дал ответ

Ответ №3:

Вам нужно обернуть свои входные данные в <form> ... </form> тег