Vue.js - Enter 키를 사용하여 양식을 제출하려면 어떻게 해야 합니까?

Vue.js - Enter 키를 사용하여 양식을 제출하려면 어떻게 해야 합니까?

매우 간단한 입력

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

입력만으로 어떻게 할 수 있을까요? (버튼을 숨기지 마세요)

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

언급URL : https://stackoverflow.com/questions/64828512/vue-js-how-can-i-submit-a-form-with-the-enter-key