时间戳

首页 > 解决方案 > 在搜索中输入时阻止提交表单数据

vue.js - 在搜索中输入时阻止提交表单数据

问题描述

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

我将它@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>

标签： vue.js

解决方案

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

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

推荐阅读