Question

我有form。在此表单组件中，我有一个搜索框。我创建了两种方法，一种用于搜索，另一种用于提交数据。每次我进入搜索时，两种方法都会触发。

我将此@submit.prevent="saveFormData"用于整个表格，并将v-on:submit.prevent keyup.enter ="searchCustomerRecord"用于搜索记录那么searchCustomerRecords根本无法工作

<form class="mx-auto w-full max-w-lg" @submit.prevent="saveFormData">
  ....
  <div class="sm:text-left my-2 md:text-right">
   <input type="search" class="w-full bg-purple-white"placeholder="Search Here..." 
   name="search" v-model="searchInput" v-on:keyup.enter ="searchCustomerRecord">
  </div> 
  .....

   <div class="flex-auto text-center px-3 mb-6 md:mb-0">
     <button type="submit" class="m-2 py-2 hover:bg-green-dark ">Save</button>
     <button class="m-2 py-2  hover:bg-red">Clear</button>
   </div>
</form>

Answer 1

您可以在输入内部更早地捕获事件并停止其传播，例如：

<input type="search" @keydown.enter.prevent.stop="searchCustomerRecord" />

搜寻时禁止提交表单数据

1 个答案: