Vuejs如何防止表单在回车时提交，但仍然将工作保存在输入中？

Question

这阻止了enter submit，但目前阻止了enter in inputs。我需要在输入中输入关键字，而不是提交表单。

<template id="form-template">
       <form action="save-passport" @keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded"   >
<input type="submit" v-show="loaded"  v-on:click="saveForm" value="Save" />

<input type="text" required="required" name="field-11" > 
<select required="required" name="field-13"><option value=""></option> 
</select>
</form>
       </template>

Answer 1

也有同样的问题。我所做的解决方案是将submit方法放在开始表单标记上。然后，对于底部表单中的输入/按钮“submit”，则不需要。

<form class="form" action="" method="POST" @submit.enter.prevent="createForm()">

还有输入上可用的其他选项：

@keydown.enter.prevent
@keyup.enter.prevent
@submit.enter.prevent

Answer 2

您需要使用prevent修饰符。另一件事，你的网页本身必须有焦点。意思是，如果你只是访问网页，prevent将无法工作。但是，如果您单击表单中的某个位置，prevent将为您工作。

您仍然可以使用类似于document.forms[0].submit();的方式通过JavaScript提交表单

Answer 3

我是这样做的，首先我从表单标签中删除了vue修饰符。第二，我将输入类型从submit更改为button，第三，这是我的saveForm函数

saveForm:function(){
        if (someCondition){
            event.preventDefault();
        }else{
            document.forms[0].submit();
        }
      }