html - Vue.js -How can I submit a form with the Enter key?
问题描述
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)
解决方案
该@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>
推荐阅读
- c# - 根据列表定义自定义集合类。如何访问存储在实例中的元素?
- c# - 无法解析格式良好的 JSON
- python - 如何重新排列 3D 阵列
- javascript - DataTables ajax 请求 - 无法读取未定义的属性“长度”
- mysql - 更新 MySQL 不正确的语法
- sas - 将具有特定字符的列转置为行
- typescript - 将新字段推入嵌套数组
- gradle-kotlin-dsl - 如何在 Kotlin 中创建 Gradle Action 对象
- javascript - Vue.js 在冻结数组中的对象然后尝试修改它们时 v-model 和 :value 之间的区别
- javascript - 如何从 React Navigation 获取以前的路线名称