Vue.js -How can I submit a form with the Enter key?

Question

So simple input

<input ref="input" class="terminal-input" autofocus
  v-model="message" type="submit" @submit.prevent="printToConsole"/>

When added type="submit" I can't type in the input anymore. It just changes into a button! So I've found a solution to just make a form, add a button (make it submit) and hide the button.

 <form>
      <input ref="input" class="terminal-input" autofocus v-model="message"/> 
      <q-btn type="submit" @click="printToConsole" v-show="false"/>
 </form>

Can I somehow do this but with input only? (So no hiding button stuff)

`type="submit"` is a submit button, not a text field. What are you trying to accomplish? — hobbs, Nov 13 '20 at 21:57
I want to be able to "submit" when I press enter in the input — Jozef Plata, Nov 13 '20 at 22:02
That's standard behavior if you have a submit button anywhere in the form; it's not tied to any specific text field. — hobbs, Nov 13 '20 at 22:16

Boussadjra Brahim · Accepted Answer · 2020-11-13T22:13:22.833

The @submit event should be added to the form element:

 <form  @submit.prevent="printToConsole">
      <input ref="input" class="terminal-input" autofocus v-model="message"/> 
      
 </form>

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      message: ''
    }
  },
  methods: {

    printToConsole() {
      console.log(this.message)
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">
  <form @submit.prevent="printToConsole">
    <input ref="input" class="terminal-input" autofocus v-model="message" />

  </form>
</div>

Vue.js -How can I submit a form with the Enter key?

1 Answers1