How to create Enter event in input text area to push the button with Vue.js & Electron

Question

I developed login app and it works well, but I want to make it more convenient. I want to make it When I focus in password input area and clicks the Enter Button in keyboard, Login button should be clicked.

But now I have to click button with mouse or clicks tab key and Enter.

I search it on internet and it seems really easy but I don't know how to apply my condition.

The problem is I put login button in another component vue file.

[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>

[ConnectionItem.vue]

  <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>

At first I tried ref="sendReply" with this.$refs.sendReply.click() method but it cause the error like this
[Error Message]

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>

I thinks it should be connect main.vue and connectionItem.vue somewhere but I have no idea of this situation. Any ideas or keywords are welcome. Thanks ;)

AlekseyHoffman · Accepted Answer · 2021-03-31 17:12:28Z

1

There are multiple ways you can do it:

Method 1:

Bind the keypress listener to the input field. The event will trigger only when the filed is focused:

<input @keypress.enter="trigger()">

Method 2:

Add the keypress listener when the form component gets opened, remove it when it gets closed.

The event will trigger until you unregister the listener:

data () {
  return {
    formIsOpened: false
  }
},
watch: {
  formIsOpened (value) {
    if (value) {
      window.addEventListener('keypress', this.formEnterKeypressHandler)
    }
    else if (!value) {
      window.removeEventListener('keypress', this.formEnterKeypressHandler)
    }
  }
},
methods: {
  formEnterKeypressHandler (event) {
    if (event.code === 'Enter') {
       this.trigger()
    }
  },
  trigger () {
    console.log('trigger')
  }
}

edited Mar 31, 2021 at 17:12

answered Mar 31, 2021 at 17:06

AlekseyHoffman

2,7241 gold badge15 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create Enter event in input text area to push the button with Vue.js & Electron

1 Answer 1

Method 1:

Method 2:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Method 1:

Method 2:

Comments

Your Answer

Sign up or log in

Post as a guest

Related