VueJs 处理按 Enter 键提交表单

Question

我有 Angular 的背景。从 vue 开始对我来说是一次不错的经历，直到我遇到了一个 VueJS 开发人员似乎已经在上面拉屎并躲在地毯下的问题。 我们如何创建一个表单，用户可以在输入字段中按 Enter 来提交表单

这真是令人失望。

如果您知道答案，请也将其发布在官方 vue 文档中。

*注意：我的解决方法：我v-on:keydown.enter.prevent='loginUser'在每个输入字段上使用。有什么方法可以不以这种方式使用它（在每个输入字段上）。

Answer 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>