这么简单的输入
<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>
关于html - Vue.js - 如何使用 Enter 键提交表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64828512/