Vue.js - 如何使用 Enter 键提交表单？答案

【问题标题】：Vue.js -How can I submit a form with the Enter key?Vue.js - 如何使用 Enter 键提交表单？
【发布时间】：2020-11-13 21:55:12
【问题描述】：

如此简单的输入

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

添加type="submit" 后，我无法再输入。它只是变成一个按钮！所以我找到了一个解决方案，只需制作一个表单，添加一个按钮（使其提交）并隐藏按钮。

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

我能以某种方式做到这一点，但只需要输入吗？（所以没有隐藏按钮的东西）

【问题讨论】：

type="submit" 是提交按钮，而不是文本字段。你想完成什么？
我希望在输入中按回车时能够“提交”
如果您在表单中的任何位置都有提交按钮，这是标准行为；它不依赖于任何特定的文本字段。

标签： html vue.js vuejs2 quasar-framework

【解决方案1】：

@submit 事件应该添加到表单元素中：

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

【讨论】：