Javascript 如何在输入文本区域中创建Enter事件以使用Vue.js按下按钮&；电子

我开发了一个登录应用程序，效果很好，但我想让它更方便。我想让它当我在密码输入区的重点，并点击键盘上的输入按钮，登录按钮应点击

但现在我必须用鼠标点击按钮或点击tab键并进入

我在网上搜索它，看起来很简单，但我不知道如何应用我的条件

问题是我将登录按钮放在另一个组件vue文件中

[main.vue]

 <div class="form-item">
 <label>ID</label>
   <input type="text" class="input-form" id="id" v-model="conn.user">
 </div>
  <div class="form-item">
  <label>Password</label>
 <input type="password" class="input-form" id="password" v-model="conn.password" @keyup.enter="trigger">
   </div>
  <div class="form-item">
 <ConnectionItem ref="sendReply" :key="conn.uuid" :conn="conn" @connect="connect" @disconnect="disconnect" />
</div>

  <div class="item">
    <div class="form-item">
<button class="login" v-show="showConnectButton" :class="{ 'success': isConnected, 'connecting- 
 disconnecting': isConnectingOrDisconnecting }" :disabled="isConnectingOrDisconnecting"  
 @click="$emit(isConnected ? 'disconnect' : 'connect', conn)">{{isConnected ? 'disconnect' : 'login'}} 
 </button>
      </div>
  </div>

vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "TypeError: this.$refs.sendReply.click is not a function"

found in
---> <MainWindow> at src/renderer/components/MainWindow/index.vue
       <GeomecCloudManager> at src/renderer/App.vue
         <Root>

---

我认为应该在某个地方连接main.vue和connectionItem.vue，但我不知道这种情况。欢迎任何想法或关键字。谢谢；）

有多种方法可以做到这一点：

方法1： 将按键侦听器绑定到输入字段。仅当字段聚焦时，事件才会触发：

方法2： 在窗体组件打开时添加按键侦听器，在关闭时删除它

在您注销侦听器之前，将触发该事件：

数据（）{
返回{
错误：错误
}
},
观察：{
formIsOpened（值）{
如果（值）{
window.addEventListener（'keypress'，this.formEnterKeypressHandler）
}
如果（！值）{
window.removeEventListener（'keypress'，this.formEnterKeypressHandler）
}
}
},
方法：{
formEnterKeypressHandler（事件）{
如果（event.code=='Enter'）{
this.trigger（）
}
},
触发器（）{
console.log（'trigger'）
}
}