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

Question

输入如此简单

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

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

Answer 1

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

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

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