Vue子组件输入框按回车跳转父组件，如何禁用回车默认行为？

我有一个包含输入框的Vue子组件，按下回车键时会跳转到父组件。即使给输入框添加@keyup.enter="getFromAddress()"绑定，该问题仍然存在。请问这是因为处于子组件导致的吗？该如何禁用回车键的默认跳转行为？

原始代码示例 #

未添加回车绑定的代码：

<div class="form-field">
  <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
  <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
</div>

添加回车绑定后的代码：

<div class="form-field">
  <input @keyup.enter="getFromAddress()" v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
  <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
</div>

这跟子组件没关系，是浏览器的默认行为导致的：当表单里只有一个输入框时，按下回车键会自动提交表单，触发页面跳转（如果表单没指定action，就会刷新当前页面或跳转到父路由）。你的代码里哪怕没写<form>标签，也可能是父组件或更高层级有<form>把这个输入框包裹了，才触发了默认提交。

下面是几种解决方法：

• 方法一：改用keydown事件并阻止默认行为
  keyup是按键抬起时触发，这时候浏览器的默认跳转已经执行了，换成keydown能提前拦截。直接在指令里加.prevent修饰符就行：

  <input @keydown.enter.prevent="getFromAddress()" v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
  

  或者在getFromAddress方法里手动阻止：

  methods: {
    getFromAddress(event) {
      event.preventDefault()
      // 这里写你的业务逻辑
    }
  }
  

  注意如果用@keydown.enter="getFromAddress"，要确保方法接收event参数。

• 方法二：给表单添加阻止提交的绑定
  如果确定有<form>标签包裹这个输入框，直接在<form>上阻止默认提交行为：

  <form @submit.prevent>
    <div class="form-field">
      <input @keyup.enter="getFromAddress()" v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
      <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
    </div>
  </form>
  

• 方法三：添加隐藏输入框绕过默认行为
  浏览器只有在表单里只有一个输入框时才会触发自动提交，加个隐藏的输入框就能绕过这个逻辑：

  <div class="form-field">
    <input v-model="userInput" :placeholder="$t('findCenter.placeholder')" type="text">
    <input type="text" style="display: none;"> <!-- 隐藏的输入框 -->
    <div class="btn primary" @click="getFromAddress()">{{ $t('findCenter.cta') }}</div>
  </div>
  

内容的提问来源于stack exchange，提问作者EleXorZ